悬停元素激活悬停CSS另一种元素

我正在做一个菜单，图标和一些文字，像这样：悬停元素激活悬停CSS另一种元素

enter image description here

的问题是，我想要的图标被“强调”当我将鼠标悬停在标签上时，不必将鼠标悬停在小图标上方。所以这就是现在发生的事情：

enter image description here

所以我的问题是我怎么能悬停一个元素（标签是一个div）上，并激活悬停CSS另一种元素（图标）。

这是图标的代码：（HTML）

<a href="#" class="menubutton"> 
    <span id="playicon"></span> Servers 
</a>

（CSS）

#playicon { 
    width:12px; 
    height:12px; 
    background-image:url("img/svg/play2.svg"); 
    background-repeat:no-repeat; 
    display:inline-block; 
} 

#playicon:hover { 
    background-image:url(img/svg/play_hover.svg); 
}

预先感谢您！ :)

来源

2013-08-18 August

随着你给的HTML，你需要第二个规则更改为

.menubutton:hover #playicon { 
    background-image:url(img/svg/play_hover.svg); 
}

此规则适用于#playicon当它是徘徊.menubutton的后代，这是你想要的（使用儿童选择器.menubutton:hover > #playicon可能是一个好主意，但它不会产生任何实际区别）。

此外，请注意，有<span>这样的id确定这有点奇怪 - 看起来你会在同一页上有这个跨度的倍数，ID必须是唯一的。如果您确实有倍数，请将类别替换为id。

来源

2013-08-18 18:18:42 Jon

好，谢谢，我把它改成了'id'柜面需要的悬停的JavaScript :hover伪类，因为JavaScript不能改变类（没有我认为的库）。 – August

@八月：它可以通过['className']（https://developer.mozilla.org/en-US/docs/Web/API/element.className）属性更改类，它只是可能性一次有多个类别使操作更简单。 – Jon

使用的菜单按钮，而不是图标

#playicon { 
    width:12px; 
    height:12px; 
    background-image:url("img/svg/play2.svg"); 
    background-repeat:no-repeat; 
    display:inline-block; 
} 

.menubutton:hover #playicon { 
    background-image:url(img/svg/play_hover.svg); 
}

来源

2013-08-18 18:19:28

#element1:hover #element2

Live example, with more advanced css techniques

来源

2013-08-18 18:20:32 VenomVendor

悬停元素激活悬停CSS另一种元素

回答

相关问题