CSS hover - 可以影响具有相同类名的多个div吗？

Question

CSS hover - 可以影响具有相同类名的多个div吗？

3

我有5个带有相同类名的div，如下所示：

CSS：

.test:hover{
   color:red;
}

HTML：

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

想象一下，这些Div在页面上的不同父Div中...

我正在尝试找到一种方法，如果我将鼠标悬停在其中任何一个上，它们都会变成color:red，而不仅仅是问题中的那个Div改变...

但是我不能将它们包装在一个父元素中并给该父元素设置hover...因为它们本来就没有共享相同的父元素。

CSS是否提供了一种方法来实现这一点，还是我必须借助JavaScript？

- Sir

1

当你悬停在一个元素上时，状态仅应用于该元素，即使其他元素具有相同的CSS规则。使用JavaScript是实现你想要的唯一方法。 - Steve Robinson

1

我知道你说你不能包装它们...但是http://jsfiddle.net/J9GP3/ - Josh Crozier

1

@w3bMak3r，如果你的（纯CSS）小样能够正常工作，我会非常惊讶。 - Terry

你需要这个吗.. http://jsfiddle.net/UeRzd/? - user2628521

对不起，它没有起作用。 - w3bMak3r

显示剩余11条评论

5个回答

2

您可以使用 JQuery 轻松实现您想要的效果...将此复制到 .html 文件中以进行测试...

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $(".test").hover(
              function() {
                $(".test").css("background-color", "red");
              }, function() {
                $(".test").css("background-color", "");
              }
            );
        });
        </script>
    </head>
    <body>
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div>
    </body>
</html>

- Jason Miller

在你的fiddle中，左上角选择一个jQuery库，例如jQuery 1.9.1...然后它就会工作。 - M.Svrcek

0

这是代码： css:

.sample{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.sample:hover ~ div{
color:red;
cursor:pointer;
}

HTML：

<div class="sample"></div>
<div class="container">
  <div class="test">1111</div>
</div>
<div class="container">
  <div class="test">2222</div>
</div>
<div class="container">
  <div class="test">3333</div>
</div>
<div class="container">
  <div class="test">4444</div>
</div>
<div class="container">
  <div class="test">5555</div>
</div>

在这里查看演示：http://jsfiddle.net/eN49z/

- Joke_Sense10

当它们位于不同的容器中时，它将完全失效，并且只会影响后代兄弟而不是所有兄弟。 CSS 真的不能做到这个问题需要的事情。另外还有：你为什么要引入一个新元素来定位 :hover？ - David Thomas

1

@David Thomas，我同意你的观点。嗯，这是我用 CSS 能做到的最大限度了... :) - Joke_Sense10

是的，我知道；这基本上就是为什么我没有投反对票的原因，因为这确实是最接近问题所要求的（没有父选择器的情况下）。 - David Thomas

@Joke_Sense10，我认为没有办法使其与复杂的实际标记一起工作，请查看示例http://jsfiddle.net/eN49z/4/。 - user2895892

@sheriffderek 虽然不是很理想，但这就是我只使用 CSS 能做到的了.. :) - Joke_Sense10

显示剩余2条评论

0

快速回答：通过 CSS 无法实现您要寻找的效果，因为 CSS 无法向上遍历父级，只能向下遍历 DOM 树以影响元素。

但是，您可以依靠 JavaScript 来实现该效果。在我的示例中，我选择依赖于 jQuery。您可以使用各种方法来获取所有其他具有类 test 的 <div>，但这取决于它们嵌套的方式 - 它们是否嵌套在兄弟节点的父级下，以及嵌套的级别等。

以下是您所描述的情况的示例标记：

<div>
    Parent 1
    <div class="test"></div>
</div>
<div>
    Parent 2
    <div class="test"></div>
</div>
<div>
    Parent 3
    <div class="test"></div>
</div>

CSS很简单。通过jQuery动态添加.hover类（而不是:hover状态）：

.test:hover, .test.hover {
    background-color: red;
}

JS 的代码可能是这样的：

$(function() {
    $(".test").hover(function() {
        // Find '.test' in all siblings of a specific '.test' parent
        $(this).parent().siblings().find(".test").addClass("hover");
    }, function() {
        // You can refine the criteria of which '.test' should be selected.
        $(document).find(".test").removeClass("hover");
    });
});

http://jsfiddle.net/teddyrised/fHwFf/

- Terry

0

现在无法通过CSS选择元素的父级。因此，也无法通过一个元素和一般的父级来选择元素。这就像是一个微小的证明。

- user2895892

@sheriffderek 我的意思是“还没有”，而不是“已经”。希望CSS4能给我们更多机会。 - user2895892

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

在符合条件的浏览器中，有一种（纯/原生）JavaScript方法可以实现此任务（这些浏览器支持[].forEach()和document.querySelectorAll()）。鉴于CSS（尚未）无法执行此任务，因此该方法适用：

function classToggle (evt, find, toggle) {
    [].forEach.call(document.querySelectorAll('.' + find), function(a){
        a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
    });
}

var els = document.querySelectorAll('.test');

for (var i = 0, len = els.length; i<len; i++){
    els[i].addEventListener('mouseover', function(e){
        classToggle(e, 'test', 'highlight');
    });
    els[i].addEventListener('mouseout', function(e){
        classToggle(e, 'test', 'highlight');
    });
}

JS Fiddle演示。

参考资料：