rich rich - 6 months ago 16
Javascript Question

How to change link color when using jquery mouseover



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

Answer

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.

Comments