Question

我希望我的链接能够在鼠标悬停时突出显示，这是我管理过的。

但是我也希望第一个项目已经突出显示 - 但是当我鼠标移开时会变得不突出显示。

此外，如果鼠标移除所有链接，我希望最后一个链接（鼠标悬停）保持突出显示。我太过于讨论如何做到这一点，我希望有人可以指导我。提前谢谢了。：）

$(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 1

将代码更改为仅使用mouseenter，这样它就不会像使用jQuery的hover()那样改回mouseeleave，然后在第一个元素上触发事件

＆＃13;

$(document).ready(function() {
  $(".menuLink").on('mouseenter', function() {
      $(this).toggleClass("menuLinkFocus menuLink")
             .closest('li')
             .siblings()
             .find('a')
             .addClass('menuLink')
             .removeClass('menuLinkFocus');
  }).first().trigger('mouseenter');
});

＆＃13;

@charset "utf-8";
@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;
  padding-right: 257.5px;
  padding-left: 257.5px;
  background-repeat: no-repeat;
  background-position: center center;
  padding-bottom: 232px;
  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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="screen">
  <div id="menu">
    <ul>
      <li><a href="#" class="menuLink">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>

＆＃13;

Answer 2

试试这个，这对你很好。

＆＃13;

<!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"});
//above line means the 'id' name 'not' 'equal' to the mouse entered  
		});

		
	});
</script>


</body>
</html>

＆＃13;

祝你好运。

toggleClass的条件

2 个答案: