CODEWITHSUNDEEP
cssmmenu
U0001
U0001

Reputation: 582

How do I set the style of menu items when hovering with the mouse

I'm having trouble trying to style mmenu, I have found an example in the documentation that specifies a custom class for this but this is not working. I have tried variations with :hover on the but this has not work either.

Code below

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

Any pointers?

Upvotes: 0

Views: 699

Answers (2)

U0001
U0001

Reputation: 582

In case of mmenu, because a child element of the li is automatically added by mmenu to support screen readers, that new element, an anchor, has a position: absolute and has precedence over all other siblings having :hover events.

So in the light of this issue, the :hover has to be put on the parent element, here being the li element. 

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

Upvotes: 1

HyeonJunOh
HyeonJunOh

Reputation: 764

I have no idea what mmenu is, but I think :hover css selector may be an answer.

Usage

 .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;*/
}

Upvotes: 0

Related Questions