Question

<html>
 <style>
	    #q1{
		 text-decoration: none;
		 color: black;
		 font-weight: bold;
		 float: none;
		 display: block;
	 }
		 #q2{
		 text-decoration: none;
		 color: black;
		 font-weight: bold;
		 float: none;
		 display: block;
	 }
	 	 #q3{
		 text-decoration: none;
		 color: black;
		 font-weight: bold;
		 float: none;
		 display: block;
	 }
	 	 #q4{
		 text-decoration: none;
		 color: black;
		 font-weight: bold;
		 float: none;
		 display: block;
	 }
	 .over{
		 background-color: red;
	 }
	 
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#hide").click(function(){
				$("p").hide();
			});
			$("#show").click(function(){
				$("p").show();
			});
			
				
		});
		
		
	</script>
	<script>
		function toggleDiv(divClass){
			$("."+divClass).toggle();
		}
	</script>
	<script>
		$("#q1").mouseover(function(){
		$(this).addClass("over");
		});
	</script>
	<body>
<h2>FAQ Hide/Show Demo</h2>
		<a id = "show" href="#">Show All</a> | <a id = "hide" href="#">Hide All</a>
<div class="faq">		   
	<a  href="javascript:toggleDiv('answer1');" id = "q1" >1.How much does it cost? </a>
        <div class = "answer1" >
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
             sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
              <strong>aliquam</strong> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
             exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea 
             commodo consequat. </p>
        </div>

我想要添加的是将.over类添加到CSS中，并在鼠标悬停在链接上时将链接颜色更改为红色。关于如何提出建议或建议？

Answer 1

为此更容易使用:hover伪类。

＆＃13;

a:hover {
  color: green;
}

＆＃13;

<a href="www.officialmuffinshop.com">Tasty Muffins - Mouseover for flavor</a>

＆＃13;

这是

的等效jQuery

＆＃13;

$("a").on("mouseover", function() {
    $(this).css("color", "red");
}).on("mouseout", function() {
      $(this).css("color", "blue");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="http://www.blueislandmixers.com">Visit the Blue Island</a>

＆＃13;

正如您所看到的，第一个比监听mouse over事件容易得多，然后是鼠标离开时的另一个事件。

Answer 2

纯CSS

.btn:hover { 
    background-color: #FA7238; 
 }

JQuery的

.btn_hover { 
    background-color: #231199; 
}

应用

$('.btn').hover(function(){$(this).toggleClass('btn_hover');});

如何在使用jquery mouseover时更改链接颜色

2 个答案: