CSS悬停转换不同的元素不起作用

Question

我在悬停时移动元素时遇到问题。这是HTML

<nav class="user-navbar">
    <ul>
        <li>My Stories</li>
        <li>Following</li>
        <li>Hot Stuff<sup class="fa fa-circle"></sup></li>
        <li>Everyone</li>
        <li>Categories<i class="fa fa-sort-desc"></i></li>
    </ul>
    <div id="pointer"></div>
</nav>

这是我与之相关的事情

.user-navbar li:nth-child(2):hover #pointer {
    transform: translateX(100px);
}

我希望我的#pointer元素在悬停在第二个li元素上时移动。这不起作用。请告诉我如何用CSS或者jQuery来解决这个问题。谢谢！

Answer 1

不幸的是，CSS3中没有父选择器，因此您无法选择不在目标元素父级内的元素。
您有几个选择：

1. 使用JavaScript
2. 使用永远存在的checkbox hack

我将解释两者。

使用JavaScript：

这在JS中很容易做到，这里是jQuery中的一个版本：

＆＃13;
＆＃13;
$(function(){
  $(".user-navbar li:nth-child(2)").hover(function(){
    $("#pointer").addClass("move");
    },function(){
    $("#pointer").removeClass("move");
    });
  });
                                         
                                        
＆＃13;
 #pointer.move {
      transform: translateX(100px);
   }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav class="user-navbar">
            <ul>
                <li>My Stories</li>
                <li>Following</li>
                <li>Hot Stuff<sup class="fa fa-circle"></sup></li>
                <li>Everyone</li>
                <li>Categories<i class="fa fa-sort-desc"></i></li>
            </ul>
            <div id="pointer">Trararara</div>
        </nav>
＆＃13;
＆＃13;
＆＃13;

但是，这需要您使用jQuery。如果你是那种喜欢我的人，不喜欢使用jQuery，那么你将会寻找一个纯粹的JS版本

＆＃13;
＆＃13;
var p = document.getElementById("pointer");
var secondLI = document.querySelectorAll(".user-navbar li")[1];
secondLI.onmouseover = function(){
  p.classList.add("move");
}
secondLI.onmouseout = function(){
  p.classList.remove("move");
}
＆＃13;
#pointer.move {
      transform: translateX(100px);
   }
＆＃13;
<nav class="user-navbar">
            <ul>
                <li>My Stories</li>
                <li>Following</li>
                <li>Hot Stuff<sup class="fa fa-circle"></sup></li>
                <li>Everyone</li>
                <li>Categories<i class="fa fa-sort-desc"></i></li>
            </ul>
            <div id="pointer">Trararara</div>
        </nav>
＆＃13;
＆＃13;
＆＃13;

那是它！

使用永远存在的checkbox hack：

checkbox hack在CSS中执行很多操作是一种混乱的方式，在这种情况下，选择父级。
那么，让我们开始吧。 首先，我们采用这样漂亮的HTML结构，并添加一个复选框和标签：

<nav class="user-navbar">
<input type="checkbox" id="hoverHack" name="hoverHack" style="position:fixed;left:-100000px;">
            <ul>
                <li>My Stories</li>
                <li><label for="hoverHack">Following</label></li>
                <li>Hot Stuff<sup class="fa fa-circle"></sup></li>
                <li>Everyone</li>
                <li>Categories<i class="fa fa-sort-desc"></i></li>
            </ul>
            <div id="pointer"></div>
        </nav>

这个概念就是这样，你把复选框放在你想要选择的元素上方的html结构中，然后用定位隐藏它（谁想要一个随机的复选框？）。然后，为要悬停在其中的元素中的复选框放置标签。标签上使用的任何事件也会在复选框上使用。我们有HTML，所以我们只需要一点CSS魔术：

#hoverHack:hover ~ #pointer {
      transform: translateX(100px);
   }

TADA !!!

＆＃13;
＆＃13;
#hoverHack:hover ~ #pointer {
          transform: translateX(100px);
       }
＆＃13;
<nav class="user-navbar">
    <input type="checkbox" id="hoverHack" name="hoverHack" style="position:fixed;left:-100000px;">
                <ul>
                    <li>My Stories</li>
                    <li><label for="hoverHack">Following</label></li>
                    <li>Hot Stuff<sup class="fa fa-circle"></sup></li>
                    <li>Everyone</li>
                    <li>Categories<i class="fa fa-sort-desc"></i></li>
                </ul>
                <div id="pointer">Taralala</div>
            </nav>
＆＃13;
＆＃13;
＆＃13; 因此，通过对HTML结构的一些调整，您可以选择不在目标元素父级中的元素，只需使用CSS。享受！

Answer 2

您可以使用jQuery来实现所需的结果。

$('.user-navbar li:nth-child(2)').hover(function() {
        $(this).closest('nav').find('#pointer').css('transform', 'translateX(100px)');  
})

上面的事件侦听器遍历父实体并将样式应用于匹配的子元素。

http://jsfiddle.net/x75pzywk/

此外，如果您需要切换＆＃39;翻译：

$('.user-navbar li:nth-child(2)').hover(function() {
        $(this).closest('nav').find('#pointer').toggleClass('active');  
})

CSS

#pointer.active {
    transform: translateX(100px);
}

http://jsfiddle.net/hnaxrtf2/2/

注意：上面的例子假设提供的元素存在于heirachry中。

Answer 3

我不知道在纯CSS中这样做。使用jQuery库通过项目上的mouseover侦听器执行此操作：

$(".user-navbar li:nth-child(2)").on('mouseover', function() {
  $("#pointer").css({
    transform: 'translateX(100px)'
  });
});

然后如果您希望它返回mouseleave

$(".user-navbar li:nth-child(2)").on('mouseleave', function() {
  $("#pointer").css({
    transform: 'translateX(0px)'
  });
});