Question

我在尝试设置mmenu时遇到了问题，我在文档中找到了一个为此指定自定义类的示例，但这不起作用。我尝试过变种：悬停在上面，但这也没有用。

以下代码

＆＃13;

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

＆＃13;

<!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>

＆＃13;

任何指针？

Answer 1

我不知道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;*/
}

Answer 2

对于mmenu，因为mmenu会自动添加li的子元素以支持屏幕阅读器，所以新元素（锚）具有一个位置：绝对并且优先于所有其他具有：悬停事件的兄弟。

因此，根据这个问题，：hover必须放在父元素上，这里是li元素。

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

使用鼠标悬停时如何设置菜单项的样式

2 个答案: