CSS更改父级悬停上的子元素字体颜色

-1

我试图让它如此：当将鼠标悬停在td上时，跨度内部变为白色，并且td的背景变为蓝色。但是，没有一个类似的问题似乎对我有帮助。表例如CSS更改父级悬停上的子元素字体颜色

第一行：

<tbody> 
    <tr> 

     <td> 
      <h4> 
       <span> 
        <strong>Account Holder Collection Procedures</strong> 
       </span> 
      </h4> 
     </td> 

     <td> 
      <h4> 
       <span> 
        <strong>AMVIR Help Sheet</strong> 
       </span> 
      </h4> 
     </td> 

    </tr> 
</tbody>

下面是一些CSS我已经试过了不工作：

td:hover > h4 > span{ 
color: #fff !important; 
} 

td:hover > span{ 
color: #fff !important; 
} 

td:hover ~ span{ 
color: #fff !important; 
} 

td:hover + span{ 
color: #fff !important; 
} 

td:hover span{ 
color: #fff !important; 
}

这使得TD背景正确的颜色，但将只改变跨度颜色，如果你将鼠标移过跨度，而不是td：

td:hover{ 
background: #0073a5; 
} 

span:hover{ 
color: #fff !important; 
}

这是上面的CSS是什么样子，如果我把我的鼠标在TD上，而不是跨度：

解决方案：

div[class*="et_pb_tab_"] td:hover span{ 
    color: #fff !important; 
}

来源

2017-10-20 Dylan Grove

你的CSS似乎完全依赖于这个类'.et_pb_tab_0'我看到无处的HTML。 – Santi

这是一个更大更复杂模块的snipet。这是不相关的，因为我可以使用这个CSS来设置html中的内容。我只是修剪了脂肪以节省一些空间。我的问题与语法有关，而不是这个例子的样子。 –

根据您已经定义的其他样式，'td：hover span {color：#fff！important;}'应该可以让您在那里 – UncaughtTypeError

的CSS将成为此：

td:hover { 
    background-color: blue; 
} 

td:hover span { 
    color: white; 
}

来源

2017-10-20 21:51:57

我最终这样做了：div [class * =“et_pb_tab_”] td：hover span {color：#fff！important; } 谢谢！ –

.et_pb_tab_0 td:hover h4{ color: #fff !important; }

来源

2017-10-20 21:48:45

您的问题在于你没有提及<span>的父级，当你将它悬停时它会影响它。在我们的案例中是<td>。它应该永远是这样的：

.parent:hover .child { 
    /* ... */ 
}

所以你的CSS需要编辑到：

td:hover{ 
background: #0073a5; 
} 

td:hover span{ 
color: #fff !important; 
}

你可以看到它上面提到的格式相匹配！

这是不相关的问题，但您可以添加transition: all .1s ease;到< td>和<span>一个平滑的动画

来源

2017-10-21 01:02:38

CSS更改父级悬停上的子元素字体颜色

回答

相关问题