Question

我有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中...

如果我将鼠标悬停在5个中的任何一个而不仅仅是有问题的那个中，我正试图找到一种方法，以便它们都变为color:red ...

我无法将它们包裹在父母中，并且让父母一直悬停......他们首先不会共享同一个父母。

CSS是否提供了这样做的方法，还是我不得不休息到JavaScript？

Answer 1

您可以使用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>

Answer 2

一种（普通/普通）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 demo

参考文献：

Answer 3

以下是代码：

的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/

Answer 4

现在无法通过CSS选择元素的父级。因此，按一个元素和一般父母选择元素也是不可能的。它就像一个小小的证明。

Answer 5

快速回答：仅通过CSS无法实现您正在寻找的效果，因为CSS无法沿着父级向上移动，而只能沿着DOM树向下移动以影响元素。

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

以下是您所描述的方案的示例标记：

<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很简单。 .hover类（不是:hover状态）由jQuery动态添加（见下文）：

.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/

CSS悬停 - 它可以影响具有相同类名的多个div

5 个答案: