How to change link color when using jquery mouseover

问题

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

What I want to add is add a .over class to CSS and have it change the link color to red whenever my mouse hovers over the links. Any advice or suggestions on how?

回答1:

It's easier to just use the :hover pseudo-class for this.

a:hover {
  color: green;
}

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

Here's the equivalent jQuery for this

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

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

As you can see the first one is much easier than listening for a mouse over event and then another event for when the mouse leaves.

回答2:

Pure CSS

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

JQuery

.btn_hover { 
    background-color: #231199; 
}

Apply

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

来源：https://stackoverflow.com/questions/34007612/how-to-change-link-color-when-using-jquery-mouseover

标签

jquery

css

hyperlink

hover

mouseover