Cuckoo Cuckoo - 2 months ago 6
HTML Question

Conditions for toggleClass

I want my links to highlight when I mouseover them, which I've managed.

But I also want the first item to be already highlighted - but become un-highlighted when I mouseout.

Additionally, if the mouseouts all links, I'd like the last link (that was mouseover) to remain highlighted. I'm too much of a noob to figure out how to do this, I'm hoping someone can guide me. Many thanks in advance. :)



$(document).ready(function() {
$(".menuLink").hover(function() {
$(this).toggleClass("menuLinkFocus menuLink");
});
});

@font-face {
font-family: zx_spectrum-7;
src: url(zx_spectrum-7.ttf);
}

* {
margin: 0px;
border: 0px;
}

.bg {
background-color: #e0e0ef;
font-family: zx_spectrum-7;
font-size: 14px;
}

#screen {
height: 556px;
width: 720p1;
background-color: #e0e0ef;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
}

#screenFooter {
height: 20px;
width: 720px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

#menu {
letter-spacing: -1.5px;
background-image: url(images/menu.jpg);
height: 96px;
width: 205px;
background-repeat: no-repeat;
background-position: center center;
line-height: 16px;
line-width: 201px;
}

#menu li {
text-decoration: none;
list-style-type: none;
padding-top:16px;
padding-left:16px;
color:#343434;
}

.menuLink {
text-decoration: none;
color: #343434;
display: block;
width: 201px;
}

.menuLinkFocus {
text-decoration: none;
background-color: #34efef;
color: #343434;
display: block;
width: 187px;
margin-left: -14px;
padding-left: 14px;
}

.menuLinkStart {
text-decoration: none;
background-color: #34efef;
color: #343434;
display: block;
width: 187px;
margin-left: -14px;
padding-left: 14px;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body class="bg">
<div id="screen">
<div id="menu">
<ul>
<li><a href="#" class="menuLinkFocus">Item 1</a>
</li>
<li><a href="#" class="menuLink">Item 2</a>
</li>
<li><a href="#" class="menuLink">Item 3</a>
</li>
<li><a href="#" class="menuLink">Item 4</a>
</li>
</ul>
</div>
<!--End Menu-->
</div>
<!--End Screen-->
<div id="screenFooter">Footer text hereLtd</div>




Answer

try this, this will work for you fine.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
<style type="text/css">

ul.mylinks{
	list-style-type: none;
	width: 100px;
}

ul.mylinks li{
	margin-top: 10px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}

ul.mylinks li a{
	text-decoration:none;
	color:orange;
	font-family: monospace;
	font-size:20px;
}

#id1{
	background-color: gray;
}


</style>
</head>



<body>

<ul class="mylinks">
	<li id="id1"><a href="">link 1111</a></li>
	<li id="id2"><a href="">link 2222</a></li>
	<li id="id3"><a href="">link 3333</a></li>
	<li id="id4"><a href="">link 4444</a></li>
	<li id="id5"><a href="">link 5555</a></li>
</ul>


<script type="text/javascript">
	$(document).ready(function(){
		$("ul.mylinks li").mouseenter(function(){
			$("ul.mylinks li:first-child").css({"background-color":"white"});
		});

		$("ul.mylinks li").mouseenter(function(){
			var get_theid = $(this).attr('id');
			var theid = "#"+get_theid;
			$(theid).css({"background-color":"gray"});
			$('li:not('+theid+')').css({"background-color":"white"});
		});

		
	});
</script>


</body>
</html>

good luck.

Comments