【问题标题】：Is there a way to make other elements disappear when hovering over 1 element有没有办法让其他元素在悬停在 1 个元素上时消失
【发布时间】：2014-04-15 02:47:43
【问题描述】：

我正在努力做到这一点，以便当我将鼠标悬停在启动页面上的一个链接上时，它会显示文本，而其他按钮会消失。然后，当您停止将鼠标悬停在它上面时，元素会重新出现。

我想这样做here

到目前为止，我没有任何想法。我认为您必须对其他元素不显示任何内容，但我不知道如何在将鼠标悬停在另一个元素上时不显示其他元素。

【问题讨论】：

向我们展示您目前的想法。
你基本上需要 JS 来完成类似的事情。这样做可能有一些 CSS 技巧（取决于您希望它如何工作），但这并不值得。

标签： html css button hyperlink

【解决方案1】：

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

上圈的悬停是用 CSS 完成的，下层的悬停是用 jQuery 完成的。

重要的一点是 CSS 中的“相邻”意味着“之后”——在 DOM 中悬停的元素之前，您不能对任何内容进行操作。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

函数式 API 文档真的是学习 jQuery 的地方吗？
@wavemode 假设您在考虑 jQuery 之前已经从其他地方学习过一些关于编码的知识，是的，即使他们自己也指出了您那里。我就是这样学习的。 HTML、CSS、PHP、简单的函数手册，因为我已经掌握了 C 和 C++ 的基本语法。

【解决方案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 解决方案会更轻松。

【讨论】：