如何使用jQuery鼠標懸停時改變鏈接的顏色

<html> 
 
<style> 
 
\t  #q1{ 
 
\t \t text-decoration: none; 
 
\t \t color: black; 
 
\t \t font-weight: bold; 
 
\t \t float: none; 
 
\t \t display: block; 
 
\t } 
 
\t \t #q2{ 
 
\t \t text-decoration: none; 
 
\t \t color: black; 
 
\t \t font-weight: bold; 
 
\t \t float: none; 
 
\t \t display: block; 
 
\t } 
 
\t \t #q3{ 
 
\t \t text-decoration: none; 
 
\t \t color: black; 
 
\t \t font-weight: bold; 
 
\t \t float: none; 
 
\t \t display: block; 
 
\t } 
 
\t \t #q4{ 
 
\t \t text-decoration: none; 
 
\t \t color: black; 
 
\t \t font-weight: bold; 
 
\t \t float: none; 
 
\t \t display: block; 
 
\t } 
 
\t .over{ 
 
\t \t background-color: red; 
 
\t } 
 
\t 
 
\t </style> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <script> 
 
\t \t $(document).ready(function(){ 
 
\t \t \t $("#hide").click(function(){ 
 
\t \t \t \t $("p").hide(); 
 
\t \t \t }); 
 
\t \t \t $("#show").click(function(){ 
 
\t \t \t \t $("p").show(); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t }); 
 
\t \t 
 
\t \t 
 
\t </script> 
 
\t <script> 
 
\t \t function toggleDiv(divClass){ 
 
\t \t \t $("."+divClass).toggle(); 
 
\t \t } 
 
\t </script> 
 
\t <script> 
 
\t \t $("#q1").mouseover(function(){ 
 
\t \t $(this).addClass("over"); 
 
\t \t }); 
 
\t </script> 
 
\t <body> 
 
<h2>FAQ Hide/Show Demo</h2> 
 
\t \t <a id = "show" href="#">Show All</a> | <a id = "hide" href="#">Hide All</a> 
 
<div class="faq"> \t \t  
 
\t <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和鏈接的顏色都將其更改爲紅色，每當我的鼠標懸停在鏈接。任何意見或建議如何？

來源

2015-11-30 rich

很容易，只需使用:hover僞類此。

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事件，然後更容易鼠標離開時的另一個事件。

來源

2015-11-30 20:44:18

謝謝，這有助於很多。 – rich

純CSS

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

JQuery的

.btn_hover { 
    background-color: #231199; 
}

應用

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

來源

2015-11-30 20:44:10

如何使用jQuery鼠標懸停時改變鏈接的顏色

回答

相關問題