我一直在努力实现这个简单的事情.我试图显示/隐藏我的< TreeMenu />具有伪选择器的材质UI v1中的组件,但不知何故它不起作用.这是代码：
CSS：
CSS：
root: {
backgroundColor: 'white','&:hover': {
backgroundColor: '#99f',},hoverEle: {
visibility: 'hidden','&:hover': {
visibility: 'inherit',rootListItem: {
backgroundColor: 'white',display: 'none','&:hover': {
display: 'block',backgroundColor: '#99f','@global': {
'li > div.nth-of-type(1)': {
display: 'block !important',backgroundColor: "'yellow',",
root css类在列表上工作正常但是rootListItem甚至@global li选择器都不起作用.我不确定我在选择器上做错了什么.我读了材料-ui文档并说V1支持伪选择器.
JSX：
<div>
{props.treeNode.map(node => (
<ListItem
key={`${node.Type}|${node.NodeID}`}
id={`${node.Type}|${node.NodeID}`}
className={(classes.nested,classes.root)}
button
divider
disableGutters={false}
dense
onClick={() => props.onNodeClick(node.Type,node.NodeID,node.NodeName)}
title={props.adminUser ? node.NodeID : ''}
onMouSEOver={() => props.onMouSEOver(node.Type,node.NodeID)}
>
<ListItemIcon>{props.listIcon}</ListItemIcon>
<ListItemText primary={node.NodeName} />
<ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
<TreeMenu />
</ListItemSecondaryAction>
<div className={classes.hoverEle}>
<TreeMenu />
</div>
</ListItem>
))}
</div>
请查看< TreeMenu>零件.我已经应用了3种不同的技巧：
1)hoverEle类带有’&：hover’选择器.
2)试图覆盖默认的根类< ListItemSecondaryAction>使用我的类rootListItem
3)在li.See’li>上使用其他伪选择器. div.nth-的式(1)’：
解决方法
经过一段时间的努力让你的代码启动并运行后,我发现你的代码出了什么问题.
一切似乎都很好,rootListItem的选择器开箱即用,问题是您不能使用伪选择器：将鼠标悬停在具有display：none的元素上.相反,你应该使用不透明度：0和不透明度：1,它将隐藏你的ListItemSecondaryAction,但同时它将允许你悬停.因此,具有display：none的元素在技术上不会显示,因此您不能将它们悬停.
关于你在全局的伪选择器,你只是写错了.在div之后使用冒号代替点,并将backgroundColor更改为“黄色”而不是“黄色”,
'li > div:nth-of-type(1)': {
display: 'block !important',backgroundColor: 'yellow',
我不知道你的TreeMenu是如何看作组件的,所以我刚创建了一个包含ul / li / div节点的列表.
const styles = {
root: {
backgroundColor: 'white','&:hover': {
backgroundColor: '#99f','&:hover': {
visibility: 'inherit',rootListItem: {
backgroundColor: 'white',opacity: 0,'&:hover': {
opacity: 1,'@global': {
'li > div:nth-of-type(1)': {
display: 'block !important',backgroundColor: "yellow",};
和：
<div>
{treeNode.map(node => (
<ListItem
key={`${node.Type}|${node.NodeID}`}
id={`${node.Type}|${node.NodeID}`}
className={classes.root}
button
divider
disableGutters={false}
dense
onClick={() => {}}
title={''}
onMouSEOver={() => {}}
>
<ListItemText primary={node.NodeName} />
<ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
<ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
</ListItemSecondaryAction>
<div className={classes.hoverEle}>
<ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
</div>
</ListItem>
))}
</div>
