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

【问题标题】：How to change link color when using jquery mouseover使用jquery mouseover时如何更改链接颜色
【发布时间】：2025-12-12 13:25:01
【问题描述】：

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

我想要添加的是向 CSS 添加一个 .over 类，并让它在我的鼠标悬停在链接上时将链接颜色更改为红色。有什么建议或建议吗？

【问题讨论】：

标签： jquery css hyperlink hover mouseover

【解决方案1】：

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

a:hover {
  color: green;
}

&lt;a href="www.officialmuffinshop.com"&gt;Tasty Muffins - Mouseover for flavor&lt;/a&gt;

这是等效的 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 事件和鼠标离开时的另一个事件要容易得多。

【讨论】：

感谢帮了大忙。

【解决方案2】：

纯 CSS

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

jQuery

.btn_hover { 
    background-color: #231199; 
}

申请

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

【讨论】：