分享程序员开发的那些事...
更新时间：2023-10-30 15:49:28
使用：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> $ p>
正如你可以看到的第一个比听一个鼠标移到事件，然后鼠标离开时另一个事件。
<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.