将一个元素悬停在另一个元素上答案

【问题标题】：Change one element on hover another将一个元素悬停在另一个元素上
【发布时间】：2016-09-01 13:40:38
【问题描述】：

我有以下 html 代码：

<div class="header-menu hide-for-small">
    <ul id="primary-menu" class="subtext">
        <li id="menu-item-993"><a>X</a></li>
        <li id="menu-item-994"><a>Y</a></li>
        <li id="menu-item-995"><a>Z</a></li>
    </ul>
</div>
<div class="post-filter">..</div>

加上css：

.post-filter {
    display: none!important;
}

我想要实现的是仅在悬停#menu-item-993 时显示.post-filter div。所以我在做：

#menu-item-993:hover .post-filter {
    display:block!important;
}

但这只是行不通。我试图将+ 或~ 放在..:hover 和.post-filter 之间 - 没有成功。我做错了什么？

【问题讨论】：

当菜单悬停时，您需要使用 js 来打开（或显示/隐藏）后置过滤器的类。它不能通过纯 css 完成，因为没有父选择器（你需要它来实现你想要的）
为此使用 javascript ..... 鼠标悬停在 menu-item993 上调用添加 display:block 的函数；到 div.post-filter

标签： javascript jquery html css hover

【解决方案1】：

这是一个鼠标悬停（mouseenter）函数：

$("#menu-item-993").mouseenter(function () {
    $(".post-filter").show();
}).mouseleave(function () {
    $(".post-filter").hide();
});

如果这没有覆盖 !important 试试这个（假设在过滤后类的 JS 中没有其他依赖项）：

$("#menu-item-993").mouseenter(function () {
    $("div.header-menu + div").removeClass("post-filter");
}).mouseleave(function () {
    $("div.header-menu + div").addClass("post-filter");
});

【讨论】：

错字，应该是menu-item-993

【解决方案2】：

代码

 $("#menu-item993").mouseenter(function () {
     $(".post-filter").addClass('dispaly')
 }).mouseleave(function () {
     $(".post-filter").removeClass('dispaly');

});

CSS

   .display
    {
     display:block;
   }

【讨论】：

【解决方案3】：

使用 Javascript 添加和删除样式类。而且您不需要在初始 css 上使用 !important。

$("#menu-item-993").mouseenter(function(){
    $(".post-filter").addClass("showit");
}).mouseleave(function(){
    $(".post-filter").removeClass("showit");
});

见我的JSFIDDLE

【讨论】：

【解决方案4】：

这是一种使用hover函数和show/hide函数的方法

$('#menu-item-993').hover(function(){
  $('.post-filter').show();
},function(){
  $('.post-filter').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-menu hide-for-small">
  <ul id="primary-menu" class="subtext">
    <li id="menu-item-993"><a>X</a>
    </li>
    <li id="menu-item-994"><a>Y</a>
    </li>
    <li id="menu-item-995"><a>Z</a>
    </li>
  </ul>
</div>
<div class="post-filter" style="display:none">..</div>

【讨论】：

【解决方案5】：

试试这个 toggleClass 选项

$("body").on("mouseover mouseout", '#menu-item-993', function(){
    $('.post-filter').toggleClass("show hide");
});

.post-filter {
  display: none!important;
}
.show
{
  display: block!important;
}
.hide
{
  display: hide!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-menu hide-for-small">
  <ul id="primary-menu" class="subtext">
    <li id="menu-item-993"><a>X</a>
    </li>
    <li id="menu-item-994"><a>Y</a>
    </li>
    <li id="menu-item-995"><a>Z</a>
    </li>
  </ul>
</div>
<div class="post-filter">text</div>

【讨论】：

【解决方案6】：

您可以使用hover函数并添加css来显示和隐藏它

$("#menu-item-993").hover(function(){
  $(".post-filter").css('display','block')
},function(){
  $(".post-filter").css('display','none')
})

JSFIDDLE

【讨论】：

酷！一件小事 - 当我尝试悬停任何元素（出现在悬停后弹出的 div 上）时，它消失了。我试过添加 position:relative 和 z-index:100 但它仍然消失了:(

【解决方案7】：

<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg</div>



#thumbnail {
display: block;
width: 150px;
height: 150px;
}

#thumbnail:hover + #title {
display: block;
}

#title { 
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px; 
}

【讨论】：