每个li，鼠标悬停时都出现各自的button，移开消失
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每个li，鼠标悬停时都出现各自的button，移开消失相关的知识，希望对你有一定的参考价值。
求问怎么写js
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
button
display: none;
li
height: 36px;
line-height: 36px;
</style>
</head>
<body>
<ul>
<li>最近发布<button>编辑</button><button>删除</button></li>
<li>热门视频<button>编辑</button><button>删除</button></li>
<li>最新动态<button>编辑</button><button>删除</button></li>
</ul>
<script>
$(function()
$("li").hover(function()
$(this).find('button').show();
, function()
$(this).find('button').hide();
);
)
</script>
</body>
</html> 参考技术A 给这些li统一加上一个class名假设为litest，然后写一个监听，当鼠标悬浮的时候，$this.find("button).css("display:block");也就是显示当前li内部的按钮，鼠标移出的时候$this.find("button).css("display:none");也就是隐藏当前li内部的按钮。当然初始情况下按钮display都要设为none
没有应用鼠标悬停的下拉文字颜色
我做了一个固定的导航栏，但似乎无法确定为什么当你将鼠标悬停在“主菜单”上然后悬停子菜单时，“主菜单”的文字不会改变颜色？
#nav-top > ul > li > a:hover, .nav-top-menu-button:hover {
background-color: #fff;
color: #000;
}
的jsfiddle：https://jsfiddle.net/owboLy2s/1/
答案
您可以使用#nav-top > ul > li:hover > a, .nav-top-menu-button:hover而不是#nav-top > ul > li > a:hover, .nav-top-menu-button:hover。所以，改变是:hover应该向前移动一步。否则，只有你的<a href=''>Menu</a>代码会触发颜色变化。
另一答案
li.nav-top-menu-button:hover a{
color:#000!important;
}
这应该工作。它针对包含“菜单”链接的主要li。由于下拉菜单仍然位于li内部，因此在选择子链接时您仍然会将其悬停。 !important只是说它优先于任何其他造型。
以上是关于每个li，鼠标悬停时都出现各自的button，移开消失的主要内容，如果未能解决你的问题，请参考以下文章
FLASH中鼠标悬停在某按钮上显示某个图层内容,移开后该图层消失.