这样做的目的是只要一个元素被悬停,就以相同类型和相同级别的所有其他元素为目标。已尝试
a:hover ~ a
只是注意到这并不是针对悬停的元素之前的元素。有使用css的解决方案吗?或者我应该以某种方式摆脱这一切?
发布于 2012-07-11 11:40:04
这是parent
或<
选择器问题(of which there are many)的变体。我知道这不完全相同,但我相信你可以想象到兄弟选择器是如何从父选择器派生出来的。
Jonathan Snook有一个关于为什么这个不存在的excellent blog post,我认为我不能做得更好,所以如果你感兴趣的话,我将留给你去阅读它。基本上,这是一项技术上困难的工作,因为元素的选择方式,这将导致整个世界在代码结构方面的混乱。
因此,简短的答案是,这不存在,恐怕您需要求助于JS来修复它。
编辑:只是几个修复的例子。使用jQuery:
$(selector).siblings().css({...});
或者,如果您想要包含元素:
$(selector).parent().children().css({...});
或者在vanilla JS中:
var element = document.querySelectorAll(selector); // or getElementById or whatever
var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
if (siblings[i] !== element) { // optional
siblings[i].style.color = 'red';
}
}
发布于 2012-07-11 14:30:37
您可以使用jQuery而不是CSS来切换悬停状态:
HTML:
<div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
CSS:
div a {color: #000;}
div a.hover {color: #00f;}
jQuery:
$("div a").hover(
function(){
$("div a").addClass("hover");
},
function(){
$("div a").removeClass("hover");
}
);
https://stackoverflow.com/questions/11431697
复制相似问题