I have to change a class name in my img tag

<img src="img/nex2.jpeg" class="name">

Now on a hover function in jquery I want to add a class name to it. So after hovering this tag should look like

<img src="img/nex2.jpeg" class="name secondname">

And once again on removal it should change to

<img src="img/nex2.jpeg" class="name">

I have to change a class name in my img tag

<img src="img/nex2.jpeg" class="name">

Now on a hover function in jquery I want to add a class name to it. So after hovering this tag should look like

<img src="img/nex2.jpeg" class="name secondname">

And once again on removal it should change to

<img src="img/nex2.jpeg" class="name">

• javascript
• jquery
• html
• css

• 3 Here are the docs and examples api.jquery./hover – Huangism Commented Mar 26, 2015 at 17:13
• 2 It seriously looks like you might want to use css here if you want specific styling for hovered elements – KJ Price Commented Mar 26, 2015 at 17:13

3 Answers 3

Here is what you need:

jQuery(function($) {
    $('img.name').hover(function() {
        $(this).addClass('secondname');
    },
    function() {
        $(this).removeClass('secondname');
    });
});

Or better to use CSS:

img.name:hover {
   // do your styling here
}

$("img").hover(
  function() {
    $( this ).toggleClass('second');
  }, function() {
    $( this ).toggleClass('second');
  }
);

.second {
  border: 2px solid red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lorempicsum./futurama/200/200/1" class="name">

Answer:

The Complete Code in JavaScript goes like this:
This gives you plete freedom to do any styling using JavaScript and is faster than jQuery.

    <script type="text/javascript">
        function addClass()
        {
          document.getElementById("apple").className += " secondname";
        }
function removeClass()
        {
        //replaces all classes with initial class
          document.getElementById("apple").className = "name";
        }

        window.onload = function()
        {
            document.getElementById("apple").addEventListener( 'mouseover' , addClass );
            document.getElementById("apple").addEventListener( 'mouseout' , removeClass );
        }
    </script>
    ...
    <img src="img/nex2.jpeg" id="apple" class="name">

Remember that using CSS is fastest:

img.name:hover
{
//paste all styles of class name secondname
}

This way you don't have to create two classes. Only name class is enough.
Rest goes with your styling, it's up to you how you style.