Question

是否可以在悬停时更改图像的src，然后再恢复原始状态？例如＆＃34;文件名始终相同＆＃34;改变的是数字。 1表示原件，2表示悬停。非常感谢您的建议。

代码：

<ul class="nav navbar-nav">
    <li><a href="#">Featured</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meet ATS<b class="caret"></b></a>
            <ul class="dropdown-menu meet-ats-top">
            <li><a href="#"><img src="/images/google1.png"></a></li>
            <li><a href="#"><img src="/images/in1.png"></a></li>
            <li><a href="#"><img src="/images/youtube1.png"></a></li>
            <li><a href="#"><img src="/images/facebook1.png"></a></li>
            <li><a href="#"><img src="/images/twitter1.png"></a></li>
            </ul>
     </li>
</ul>

Answer 1

尝试

jQuery(function ($) {
    $('.meet-ats-top li').hover(function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('1.png', '2.png')
        })
    }, function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('2.png', '1.png')
        })
    })
})

或者

jQuery(function ($) {
    $('.meet-ats-top li').hover(function (e) {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace(/(\d+)(?=\.)/, function (val) {
                return e.type == 'mouseenter' ? 2 : 1
            })
        })
    })
})

Answer 2

查找jQuery Hover方法：

http://api.jquery.com/hover/

或者，您可以使用CSS :hover

来完成

How to use 'hover' in CSS

Answer 3

只需使用CSS。

HTML：

 <ul class="dropdown-menu meet-ats-top">
   <li><a href="#" class="google"></a></li>
        ...
 </ul>

CSS：

.google {
    background-image: url(/images/google.png);
    >>You have to add width and height depending on the Image
}
.google:hover {
    background-image: url(/images/google1.png);
}

编辑：

由于空a-Tag没有任何尺寸，您应该在其中添加另一个div / span：

<li><a href="#" class="google">**<span></span>**</a></li>

这样的CSS：

.meet-ats-top a span { width: XYpx; height: XZpx; }

Answer 4

您可以尝试以下操作：

$(".dropdown-menu li a img").hover(function(){
   $(this).attr('src', $(this).attr('src').replace('1','2'));
}, function (){
   $(this).attr('src', $(this).attr('src').replace('2','1'));
})

希望它有效！

Answer 5

$('.dropdown-menu').on('hover', function(){
    var a = $(this).find('img').attr('src');
    var temp = a.split('.');
    b = substr(0,a.temp[0]-1);
    $(this).find('img').attr('src',b+'2.'+temp[1]);

});

希望这项工作！

Answer 6

<强> 1。 CSS方式（正确）

使用CSS精灵。将所有这些社交论坛合并到一个文件中，并使用background-position定位它们。它们都将一次性下载（1个HTTP请求）

<强> 2。 CSS方式（图像）

将所有图片放在html中并隐藏悬停

    <li>
         <a href="#">
            <img src="/images/google1.png">
            <img src="/images/google2.png">
         </a>
    </li>

你的CSS中的

：

.dropdown-menu a img {
    display: none; //this hides all images
}

.dropdown-menu a img:first-child {
    display: inline-block; //this shows the first child image
}

.dropdown-menu a:hover img {
    display: inline-block; //this shows all images on hover
}

.dropdown-menu a:hover img:first-child {
    display: none; //this hides the first image on hover
}

Answer 7

使用JS：

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

对你：

<ul class="nav navbar-nav">
<li><a href="#">Featured</a></li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meet ATS<b class="caret"></b></a>
        <ul class="dropdown-menu meet-ats-top">
        <li><a href="#"><img src="/images/google1.png" onmouseover="this.src='/images/google2.png'" onmouseout="this.src='/images/google1.png'" ></a></li>
        <li><a href="#"><img src="/images/in1.png" onmouseover="this.src='/images/in2.png'" onmouseout="this.src='/images/in1.png'"  ></a></li>
        <li><a href="#"><img src="/images/youtube1.png" onmouseover="this.src='/images/youtube2.png'" onmouseout="this.src='/images/youtube1.png'"  ></a></li>
        <li><a href="#"><img src="/images/facebook1.png" onmouseover="this.src='/images/facebook2.png'" onmouseout="this.src='/images/facebook1.png'"  ></a></li>
        <li><a href="#"><img src="/images/twitter1.png" onmouseover="this.src='/images/twitter2.png'" onmouseout="this.src='/images/twitter1.png'" ></a></li>
        </ul>
 </li>

Answer 8

Try this:

<div class="hover-img">
 <img src="images/ui-ux-1.png" />
</div>

$(function() {
  $(".hover-img").hover(function() {
  $(this).find('img').attr("src", "images/ui-ux-2.png");
    }, function() {
  $(this).find('img').attr("src", "images/ui-ux-1.png");
    });
  })

Jquery - 如何在悬停时更改img src？

8 个答案: