更改 div 悬停时的跨度颜色

Posted

技术标签:

【中文标题】更改 div 悬停时的跨度颜色【英文标题】:Change span color on div hover 【发布时间】:2014-07-14 14:10:11 【问题描述】:

对不起,如果这是个愚蠢的问题,但我真的不知道是什么问题。我正在尝试更改 div 悬停时 span 的颜色,但我的代码似乎不起作用。 这是我正在使用的代码:

HTML

<div class="slike_i_text">


    <a href="#"><div>
    <img align="left" src="wolf.jpg"/><span>Text 1</span></div></a>

    <a href="#"><div>
    <img align="left" src="wolf.jpg"/><span>Text 2</span></div></a>



</div>

CSS

.slike_i_text div
    overflow: hidden;
    width:300px;
    margin-bottom: 10px;
    text-decoration: none;

.slike_i_text div img
    width:80px;
    height:80px;

.slike_i_text div span
    color: #6A6A6A;
font-family: arial;
font-size: 15px;
font-weight: bold;

.slike_i_text a
    text-decoration: none;

.slike_i_text div:hover  .slike_i_text div span
    color:lightgreen;


你可以找到我的小提琴here

【问题讨论】:

【参考方案1】:

你可以试试这个(Updated Fiddle Example):

.slike_i_text div:hover span
    color:lightgreen;

而不是这个:

.slike_i_text div:hover  .slike_i_text div span
    color:lightgreen;

【讨论】:

谢谢你,这就是我想要的。再次感谢:D 我可以知道内联【参考方案2】:

您不必像.slike_i_text div:hover .slike_i_text div span 那样使用,而是应该使用.slike_i_text div:hover span

小提琴here

【讨论】:

我可以知道内联 你能给我一些背景信息吗?

以上是关于更改 div 悬停时的跨度颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何在材质 ui 卡中悬停时更改文本颜色?我想更改卡片悬停时的文本颜色而不是悬停在文本上?

悬停文本使 Div 更改颜色 - CSS

如何在悬停效果上更改 div 元素内部的背景颜色?

当父 Div 悬停时更改子 Div 的背景颜色

悬停时更改 div 内 H2 的字体颜色

使用悬停更改 DIV 颜色并单击 JQuery