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如果我将鼠标悬停在 5 个中的任何一个上，它们都会改变，而不仅仅是有问题的那个改变......

我无法将它们包裹在父母中并让父母悬停……他们一开始就没有共享同一个父母。

CSS 是否提供了一种方法来做到这一点，还是我将不得不依靠 JavaScript？

4

5 回答 5

3

鉴于 CSS （还）不能执行此任务，一种（普通/普通）JavaScript 方法（在兼容的浏览器中，支持[].forEach()和）有效，是：document.querySelectorAll()

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 小提琴演示。

参考：

于 2013-10-20T20:01:29.603 回答
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>
于 2013-10-20T17:52:42.990 回答
0

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

但是，您可以依靠 JavaScript 来实现该效果。在我的示例中，我选择依赖 jQuery。您可以使用各种方法来获取所有其他<div>s 与 class 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/

于 2013-10-20T18:03:56.447 回答
0

现在不可能通过 CSS 选择元素的父级。所以也不可能通过一个元素和一般父元素来选择元素。这就像一个小证据。

于 2013-10-20T17:52:42.603 回答
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/

于 2013-10-20T17:40:00.907 回答