在jquery中更改img标记的类名

Change class name of a img tag in jquery

本文关键字：img jquery      更新时间：2023-09-26

我必须更改img标记中的类名

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

现在，在jquery中的一个悬停函数上，我想给它添加一个类名。所以悬停后，这个标签应该看起来像

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

再次删除时，它应该改为

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

以下是您需要的：

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

或者最好使用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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lorempicsum.com/futurama/200/200/1" class="name">

答案：

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
}


这样就不必创建两个类。只有名称类就足够了。
休息与你的风格相适应，你的风格取决于你。

相关文章：