鼠标悬停时如何设置菜单项的样式答案

【问题标题】：How do I set the style of menu items when hovering with the mouse鼠标悬停时如何设置菜单项的样式
【发布时间】：2017-10-11 04:37:13
【问题描述】：

我在尝试设置 mmenu 样式时遇到问题，我在文档中找到了一个为此指定自定义类的示例，但这不起作用。我尝试了 :hover 的变体，但这也不起作用。

代码如下

.mm-listview li span:hover {
	font-size: 1em;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Demo for Erika</title>



		<!-- MMENU: START (http://mmenu.frebsite.nl/) -->
		<!-- Include jQuery.mmenu .css files -->
		<link type="text/css" href="../mmenu/jquery.mmenu.all.css?v=6.1.7" rel="stylesheet" />
		<script type="text/javascript" src="../mmenu/jquery.mmenu.all.js"></script>
        <link href="../mmenu/jquery.mmenu.css" type="text/css" rel="stylesheet" />
		<link href="../mmenu/jquery.mmenu.setselected.css" type="text/css" rel="stylesheet" />
		
		<!-- MMENU: END -->		
		
		
		
		<style type="text/css">
			
		</style>
		
	</head>

	<body>
		<!-- The page -->
		<div class="page">
			<div class="header">
				<a href="#my-menu" class='btn btn-success'>Demo</a>			
			</div>
			<div class="content">
				<p><strong>This is a demo.</strong><br />
				Click the menu icon to open the menu.</p>
			</div>
		</div>

		<!-- The menu -->
		<nav id="my-menu">	
			<ul>
				<li>
					<span> <!-- http://mmenu.frebsite.nl/support/tips-and-tricks.html See: Open Submenus -->
						<h1>About us</h1>
						<p>This is a text explaining how things that are below this menu item. Don't be scared to click on it.</p>
					</span>		
					<ul>
						<li><a href="#">Overview</a></li>
						<li><a href="#">Contacts</a></li>
						<li><a href="#">Annual Report</a></li>
					</ul>
				</li>
				
			
	</ul>
</nav>
</body>
</html>

任何指针？

【问题讨论】：

标签： css mmenu

【解决方案1】：

在 mmenu 的情况下，因为 li 的子元素由 mmenu 自动添加以支持屏幕阅读器，所以该新元素（锚点）具有 position: absolute 并且优先于具有 :hover 事件的所有其他兄弟元素。

所以鉴于这个问题， :hover 必须放在父元素上，这里是 li 元素。

    .mm-listview li:hover {
       background-color:#ff6600;
    }

【讨论】：

【解决方案2】：

我不知道mmenu 是什么，但我认为:hover css selector 可能是一个答案。

用法

 .active {
  text-decoration: underline;
  background-color: black;
}

/* Title of menu items */
.mm-listview li span h1 {
  font-size: 2em;
  color: blue;
}

/* Title style on mouse hover */
.mm-listview li span h1:hover {
  /*css declarations;*/
}

/* Description of menu items */
.mm-listview li span p {
  font-size: 1em;
}           
/* item style on mouse hover */
.mm-listview li span p:hover {
  /*css declarations;*/
}

【讨论】：

@core114 哦，谢谢。但是他想要做的（我的意思是，鼠标悬停时如何设置菜单项的样式）只需添加css :hover 选择器即可。
先生，我知道，这个问题不清楚，反正你的答案很完美
@core114 我同意“问题不清楚”。无论如何，谢谢你。 :)
原来问题在于 mmenu（jQuery 插件）重写了
元素并将子元素包装在具有 position: absolute 的标签中。在兄弟姐妹有竞争 :hover 事件的情况下，具有 position:absolute 的事件优先。这解释了为什么在跨度上放置 :hover 不起作用。