使用 jquery 鼠标悬停时如何更改 link 颜色

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 class 到 CSS 并让它在我的鼠标悬停在 link 上时将 link 颜色更改为红色秒。有什么意见或建议吗？

Answer 1

纯粹CSS

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

JQuery

.btn_hover { 
    background-color: #231199; 
}

申请

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

Answer 2

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

a:hover {
  color: green;
}

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

这是 jQuery 的等价物

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

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

使用 jquery 鼠标悬停时如何更改 link 颜色

How to change link color when using jquery mouseover

css

jquery

mouseover

hyperlink

hover