如何在使用jquery mouseover时更改链接颜色 [英] How to change link color when using jquery mouseover
本文介绍了如何在使用jquery mouseover时更改链接颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< html> < style> ＃q1 {text-decoration：none;颜色：黑色; font-weight：bold; float：none;显示：block; }＃q2 {text-decoration：none;颜色：黑色; font-weight：bold; float：none;显示：block; }＃q3 {text-decoration：none;颜色：黑色; font-weight：bold; float：none;显示：block; }＃q4 {text-decoration：none;颜色：黑色; font-weight：bold; float：none;显示：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（）;}）; （）{$（p）。show（）;}）;}）; < / scripts> < script> function toggleDiv（divClass）{$（。+ divClass）.toggle（）; }< / script> < script> $（＃q1）。mouseover（function（）{$（this）.addClass（over）;}）; < / scripts> < body>< h2>常见问题隐藏/显示演示< / h2> < a id =showhref =＃>显示全部< / a> | < a id =hidehref =＃>隐藏全部< / a>< div class =faq> < a href =javascript：toggleDiv（'answer1'）; id =q1> 1.费用多少？ < / 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，并将它将链接颜色更改为红色，只要我的鼠标悬停在链接。关于如何做任何建议或建议？
解决方案
使用：hover pseudo-class for this。
a：hover {color：green;}
< a href =www.officialmuffinshop.com> - 鼠标悬停的风味< / a>
此
< script src =https://ajax.googleapis.com/ajax/ libs / jquery / 2.1.1 / jquery.min.js< / script>< a href =http://www.blueislandmixers.com>访问蓝岛< / a>
正如你可以看到的第一个比听一个鼠标移到事件，然后鼠标离开时另一个事件。
<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?
解决方案
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.
这篇关于如何在使用jquery mouseover时更改链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
