Question

我有一些图像有一个jquery函数来交换图像，当用户将鼠标放在它们上面时。例如，当用户将鼠标移离图像时，以下工作函数将area_03.gif与area_03-over.gif交换并再次返回。我还想放置一些文字链接，也可以滚动相应的图片，任何想法如何？

编辑：“图像交换功能已经与我提供的功能一起工作了。问题我正在使文本链接交换工作”

 HTML:
<!--Links --> <a href="">Another Link</a>
        <a href="nodes1-nodes21.shtml">Nodes 1 to 21</a>
        <a href="venders1-nodes5.shtml">Venders 1 to 5</a>


<!-- Images -->
        <a href="nodes1-nodes21.shtml" >
            <img class="forhover" src="images/area_03.gif" alt="Link Nodes 1 to 21" width="45" height="27"  id="area_03" />
        </a>

        <a href="venders1-nodes5.shtml" >
            <img class="forhover" src="images/area_05.gif" alt="Link Venders 1 to 5" width="45" height="27"  id="area_05" />
        </a>



Working jquery


$(document).ready(function() {
    $('img.forhover').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
        }, function(){
    $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
     });
    });

Answer 1

我怀疑你可以使用jquery mouseenter和mouseleave函数来管理它

Answer 2

这是图像的解决方案，但不是文本。

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

JS：

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

演示：http://jsfiddle.net/Diodeus/gYyBL/

Answer 3

您是否尝试在<a>元素中使用.text（）jQuery函数？

jQuery从文本链接交换图像，如工作图像链接

3 个答案: