CODEWITHSUNDEEP
jqueryhtmlcss
dancemc15
dancemc15

Reputation: 628

How do I create change the color of the arrow on hover over?

I'm not sure if I wrote my HTML correctly. The script I have might not run because of that. I use paragraph to create space between the arrow and the text above (not shown).

    <div class="littlebg">
<div class="text">
<hr>
Renowned Japanese author Haruki Murakami said he owns over <a href="http://www.nytimes.com/2011/10/23/magazine/the-fierce-imagination-of-haruki-murakami.html?pagewanted=5&ref=baseball&_r=0">10,000 records</a>. He often references music in his stories, particularly the genres classical, jazz and American pop. His first job was at a record store, and he once ran a jazz bar, called the Peter Cat, in Tokyo with his wife.
 <a href="#begin2">
 <p><div class="arrow"></div></p>
<a href="#begin2">
  <p>
    <div class="arrow"></div>
  </p>
</a>

<script>
    $("div.arrow").hover(function() {
        $('this').css("border", '#4da6ff');
    });
</script>

</div>

Upvotes: 0

Views: 65

Answers (2)

Jamie
Jamie

Reputation: 477

Your jQuery is slightly off, it should be:

$(".arrow").hover(function() {
    $(this).css("border", "1px solid #4da6ff");
});

But you can do this simply with CSS, without jQuery like this:

.arrow:hover {
  border: 1px solid #4da6ff;
}

Upvotes: 1

user5201742
user5201742

Reputation:

The reference is $(this) or this, not $('this').

Also, you're only considering mouseenter, you should write the second callback when the mouse leaves the element and restore the previous value.

Info: https://api.jquery.com/hover/

Upvotes: 2

Related Questions