当悬停在1个元素上时，有没有办法让其他元素消失

Question

我正在尝试将其设置为当我将鼠标悬停在我的启动页面上的其中一个链接上时，它会显示文本而其他按钮会消失。然后，当您停止在其上方悬停时，元素会重新出现。

我要去做here

到目前为止我还没有任何想法。我认为你必须为其他元素显示none，但我不知道hwo在悬停在另一个元素上时不显示其他元素。

Answer 1

jQuery是一种通过事件开始使用JavaScript的简单方法。这是一个简单的鼠标来隐藏一个淡入淡出的盒子。

jQuery（DEMO）

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

    $(function() {

        var trigger = $('#hover'),
            target = $('#box');

        trigger.hover(function() {

            target.fadeOut('slow');

        });

     });

 </script>

HTML

<div id="hover">Hover over me</div>

<div id="box">Temporary Box</div>

在这里，我们通过向变量提供jQuery选择器来选择trigger（我们悬停的元素）和目标（我们要隐藏的元素）。我们提供HTML元素的选择器ID。然后，当trigger悬停时，我们.fadeOut() target

Learn more about jQuery Here

Answer 2

此FIDDLE是对已经陈述的两个优秀答案的一个小补充。

将鼠标悬停在上方圆圈上，使用CSS完成，下方悬停使用jQuery完成。

重要的一点是CSS中的“邻近”意味着“之后” - 你不能在DOM中的悬停元素之前操作任何东西。

jQuery .hover可以与两个函数一起使用 - 当你进入INTO和元素时该怎么做，以及当你离开元素时该怎么做。

JS

$('.lower').hover(
                  function(){
                           $('.upper').css('visibility', 'hidden');
                           },
                  function(){
                           $('.upper').css('visibility', 'visible');
                             });

Answer 3

如果您对css有所了解，这可以通过一些努力来实现。诀窍在于你要隐藏的元素实际上是你所悬停的元素的孩子，但是你可以把孩子放在任何你想要的地方，绝对定位，左上角和上边：

<!-- example.html -->
<div id="elem">
    <div id="elemtext" class="elemhide">
        Text
    </div>
</div>

/* example.css */
#elem {
    overflow: visible;
    position: relative;
}
.elemhide {
    position: absolute;
    z-index: 1;
}
#elem:hover .elemhide {
    display: none;
}
#elemtext {
    left: someleft;
    top: sometop;
}

然而，使用javascript解决方案会更容易。