CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
user3696118
user3696118

Reputation: 353

how to add hover link effect in jquery?

apologies by the way, i have never touched jquery before so i have no idea what i am doing.

i am trying to add a bit of jquery code in my html page, i cannot really paste the entire page, but essentially i have this block contained in section:

  <script defer src="script.js"></script>
  <script>
    $('a').hover(function() {
        $(this).css('color', 'green');
    }, function() {
        $(this).css('color', 'black');
        }
    );
    window.onload=function(){
    }
  </script>

however, the links on my page does not reflect the hover effects changes i wrote here

what could i be doing wrong? and please let me know if the entire page has be posted in order for any sort of troubleshooting...

EDIT: okay I have made a test page, there isn't much on it, but the jquery commands still does not work here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <title>Test Page</title>
    <script>
    $('a').hover(function() {
        $(this).css('color', 'green');
    }, function() {
        $(this).css('color', 'black');
        }
    );
    </script>
</head>
<body>
    <h1 id="headingOne">Header 1</h1>

    <a href="google.com">Link 1</a>
    <a href="google.com">Link 2</a>
    <a href="google.com">Link 3</a>
</body>
</html>

PS: i understand that it is not necessary to be using javascript/jquery for any of this, but this is for a school assignment and it says to be using jquery for this task...

Upvotes: 0

Views: 1325

Answers (6)

Unmitigated
Unmitigated

Reputation: 89204

You don't need Javascript for such a simple problem. You can just use the :hover CSS pseudo class.

.myClass{
  color: black;
}
.myClass:hover{
  color: green;
}
<a class="myClass">This is a link</a>

If you must use jQuery, you can use the .hover() function with the first argument being the function to execute on hover and the second argument being the function to execute when the element is no longer hovered over.

$(function(){
  $('.myClass').hover(function(){
  $(this).css('color', 'green');
  }, function(){
  $(this).css('color', '');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="myClass">This is a link</a>

Your example does not work because you are trying to access the DOM before it is ready. You should add event listeners inside $(document).ready(function(){}) or equivalently, $(function(){}). Working example with your code (http://jsfiddle.net/oe6m38xj/):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <title>Test Page</title>
    <script>
    $(function(){
        $('a').hover(function() {
        $(this).css('color', 'green');
    }, function() {
        $(this).css('color', 'black');
        }
    );
    })
    </script>
</head>
<body>
    <h1 id="headingOne">Header 1</h1>

    <a href="google.com">Link 1</a>
    <a href="google.com">Link 2</a>
    <a href="google.com">Link 3</a>
</body>
</html>

If you want to listen for all hover events on dynamically created a elements you can listen to hover events on the document that match "a" (that is, being an anchor element).

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <title>Test Page</title>
        <script>
        $(document).on('mouseenter', 'a', function() {
            $(this).css('color', 'green');
        }).on('mouseout', 'a', function() {
            $(this).css('color', 'black');
        });
        </script>
    </head>
    <body>
        <h1 id="headingOne">Header 1</h1>

        <a href="google.com">Link 1</a>
        <a href="google.com">Link 2</a>
        <a href="google.com">Link 3</a>
    </body>
    </html>

Upvotes: 2

Old Pro
Old Pro

Reputation: 25537

The $('a') operator finds all the anchor elements in the DOM and applies what follows to them. Because you have your code running synchronously in the head of your HTML document, there are no anchor elements in the DOM at the time that code runs. In order to apply your hover code to the anchor elements in the page, you have to wait until after the anchor elements are created. You can do this by putting your code inside $(document).ready(function() { /*put your code here*/ }) which will wait to execute your code until all the DOM elements are added to the DOM.

Out of necessity, this site's sandbox that enables the "Run code snippet" functionality obscures these kind of initialization problems because of all work it has to do to get the snippets to work safely inside an existing page.

Using the CSS hover pseudo-class would be better for this example as it would not have this problem (it would affect all anchor elements on the page even if they are added later), but you would still want to use jQuery if the action you are triggering is not something that can be handled via CSS (for example, if you wanted to pause playing a video in response to the hover).

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44087

This is the way you should do it if you want to do it with jQuery and not CSS:

$("a").on("mouseover", function() {
  $(this).css("color", "green");
}).on("mouseout", function() {
  $(this).css("color", "black");
});
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<a href="#">Hover on me!</a>

Upvotes: 2

saifudeen ni
saifudeen ni

Reputation: 145



Can i add jQuery inside the HTML page?

You can add your jQuery code in the page. But adding at the bottom (just before the </html> close tag) will be good.

see this:- Should Jquery code go in header or footer?

Why click function is not working?

You have to add click inside <ready> function, for some reasons with DOM you will have to think about some another approch for click event. see this



Can i add jQuery inside the HTML page?

Why is this jQuery click function not working?

Upvotes: 1

user-9725874
user-9725874

Reputation: 871

$(".selector").on({
    mouseenter: function () {
         $(this).css("color", "red");
    },
    mouseleave: function () {
         $(this).css("color", "");
    }
});
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<a class="selector" href="#">Hover on me!</a>

Upvotes: 1

Shidersz
Shidersz

Reputation: 17190

I have made you a basic example where this is working, i hope it help you.

$(document).ready(function()
{
    // Register hover listener on anchor tags.

    $('a').hover(function()
    {
        $(this).css('color', 'green');
    }, function()
    {
        $(this).css('color', 'black');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a>JUST A LINK</a>

Upvotes: 2

Related Questions