javascript - Change class name of a img tag in jquery - Stack Overflow

admin管理员组

文章数量:1022964

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

Share Improve this question Follow asked Mar 26, 2015 at 17:11 Yogesh GhaturleYogesh Ghaturle 26733 silver badges1717 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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.

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

Share Improve this question Follow asked Mar 26, 2015 at 17:11 Yogesh GhaturleYogesh Ghaturle 26733 silver badges1717 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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.

本文标签： javascriptChange class name of a img tag in jqueryStack Overflow