Question

我必须在img标签中更改类名

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

现在在jquery中使用悬停功能我想为它添加一个类名。因此，在悬停此标记后应该看起来像

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

再一次删除它应该改为

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

Answer 1

以下是您的需求：

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

或者更好地使用CSS：

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

Answer 2

＆＃13;

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

＆＃13;

.second {
  border: 2px solid red;
}

＆＃13;

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

＆＃13;

Answer 3

答案：

JavaScript中的完整代码如下所示：
这使您可以完全自由地使用JavaScript进行任何样式，并且比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">

请记住，使用CSS最快：

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

这样您就不必创建两个类。只有名称类就足够了。
休息与你的造型一致，它取决于你的风格。

在jquery中更改img标记的类名

3 个答案: