Question

HTML

h3,
h2 {
  color: green;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

h2:hover,
h3:hover {
  color: red;
}

<ul class="nav justify-content-between">
  <li class="nav-item">
    <h3>Sibling</h3>
  </li>
  <li class="nav-item">
    <h2>Parent</h2>
  </li>
  <li class="nav-item">
    <h3>Sibling</h3>
  </li>
</ul>

是否有可能让父标题在悬停在自身和兄弟标题上时触发颜色更改，但是，当兄弟标题悬停在其上时，它不会触发任何元素？我使用bootstrap来设置列表的样式等。也可以仅使用css来做到这一点吗？

使用JSFIDDLE链接： https://jsfiddle.net/jd9nenwa/6/

Answer 1

检查此代码。我不得不稍微改变层次结构。

＆＃13;

h3,
h2 {
  color: green;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

h2:hover~.heading, h2:hover {
  color: red;
}

＆＃13;

  <h2 class="heading">Parent</h2>
  <h3 class="heading">Sibling</h3>
  <h3 class="heading">Sibling</h3>

＆＃13;

Answer 2

遗憾的是纯CSS无法实现。有一个general sibling selector，但它只匹配选择后的兄弟姐妹，而不是之前的兄弟姐妹。

您现在需要使用JQuery / JavaScript来实现您的目标：

    $('h2').on('mouseenter', function() {
        $(this).addClass('hover').closest('.nav').find('h3').addClass('hover');
    });
    $('h2').on('mouseleave', function() {  

  $(this).removeClass('hover').closest('.nav').find('h3').removeClass('hover');    });

还需要更新CSS以包含.hover类：

h2:hover, h2.hover,
h3:hover, h3.hover {
  color: red;
}

Answer 3

这将是一个js的解决方案，只是用css，遗憾的是不可能，正如上面的评论所解释的那样......

$("h2").mouseenter(function() {
  $("h3").css("color","red");
});

$("h2").mouseleave(function() {
  $("h3").css("color","green");
});

h3,
h2 {
  color: green;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

h2:hover,
h3:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav justify-content-between">
  <li class="nav-item">
    <h3>Sibling</h3>
  </li>
  <li class="nav-item">
    <h2>Parent</h2>
  </li>
  <li class="nav-item">
    <h3>Sibling</h3>
  </li>
</ul>

Answer 4

根据评论更新，h2悬停触发所有标题的颜色更改，h3悬停触发器仅悬停h3。

$('.nav-item h2').mouseenter(function(){
    $('.heading').css('color','red');
  });
$('.nav-item h2').mouseleave(function(){
    $('.heading').css('color','green')
  });
$('.nav-item h3').mouseenter(function(){
    $('.nav-item h3').css('color','red');
  });
$('.nav-item h3').mouseleave(function(){
    $('.nav-item h3').css('color','green')
  });

小提琴：https://jsfiddle.net/jd9nenwa/29/

Answer 5

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
         
        $(".a").hover(function () {
            $(".a").css("color", "red");
        }, function () {
            $(".b").css("color", "black");
            });

        $(".b").hover(function () {
            $(".a").css("color", "yellow");
        }, function () {
            $(".b").css("color", "pink");
            });
        
    });
</script>
</head>
<body>

<ul class="nav justify-content-between">
  <li class="nav-item">
    <p class="a">Sibling</p>
  </li>
  <li class="nav-item">
    <p class="b">Parent</p>
  </li>
  <li class="nav-item">
    <p class="a">Sibling</p>
  </li>
</ul>
</body>
</html>

＆＃13;

悬停父元素会触发多个元素，包括自身

5 个答案: