将鼠标悬停在div更改中的图像

-4

我想要“链接”，这些链接不是真正的链接，它们实际上是设备的标题或我想要查看的内容。将鼠标悬停在div更改中的图像

将鼠标悬停在该标题上我希望图像更改，但是我想要的是在鼠标不在该标题后，最后一张图像停留在那里。

我得到了一些我不喜欢的代码。它可以是jQuery，CSS，JavaScript，我会在wordpress网站上实现它。

简单的想法是，我将不得不例如：

PICTURE GOES HERE

设备1：前|返回|侧面设备2：前面|返回|侧面

起初设备1：正面在上面打开。将鼠标悬停在任何其他位置之后：正面，背面或侧面，图片将加载，但不会更改，直到我将鼠标移到其他文本（正面，背面或侧面）上。

预加载也可以，但我已经在网站上。这将是很好的，它像WP上的常规图像一样工作，所以如果我点击图片，它会转到全尺寸的图片或链接，鼠标悬停在图片上会给出标题（标题）等。如果不可能，nvm。

它看起来应该与http://www.the-digital-picture.com/Reviews/Tamron-18-270mm-f-3.5-6.3-Di-II-VC-Lens-Review.aspx完全一样，在其下找到更多标题的图像，然后将鼠标移到这些图标上。

我有jQuery根本不起作用，用css编码，在鼠标移出改变图片，但我不想改变鼠标。

JQUERY - 试用1 - 不工作，检查了装载

<script type="text/javascript"> 
    $(document).ready(function() { 

    $("#picture_links a").hover(function(){ 
     var src = $(this).attr("href"); 
     $("#picture_holder img").attr("src", src); 
    }) 

    $("#picture_links a").click(function(){ 
     return false; 
    }) 

}) 
</script>

CSS - 不同的脚本工作，但不是因为我想：

/* On mouse image roll over */ 

img.nohover { 
border:0 
} 
img.hover { 
border:0; 
display:none 
} 
a:hover img.hover { 
display:inline 
} 
a:hover img.nohover { 
display:none 
}

来源

2012-03-21 Kova

这里没有问题。 – asawyer 2012-03-21 23:33:14

我们可以看到你到目前为止，代码明智吗？ – halfer 2012-03-21 23:43:44

有没有问题？那么我有代码不起作用，我不想要的代码，.. :( – Kova 2012-03-22 01:37:44

使用

jQuery("elementid").mouseover(function() 
{ 
    var imageId = jQuery(this).attr("imageID"); 
    var image = jQuery(this).css('background-image'); 

    var newImageId = imageId++; 
    if (newImageId >= 3) 
     newImageId = 0; 

    var newImage = image.replace(imageID, newImageId); 
    jQuery(this).css({ "background-image": "newImage " }) 

}

这只适用于您的图像是按顺序命名的。除了序列号之外没有实际名称中的数字，并且您将名为imageId的属性添加到您的div。

来源

2012-03-21 23:46:18 Puzzle84

我可以发布示例链接到页面，这不是我的正是我想要的。 – Kova 2012-03-22 16:08:58

只是把它放在原来的文章只要你不信用我肯定没有人会反对。 – Puzzle84 2012-03-22 16:32:54

我当然希望有人回复:( – Kova 2012-03-23 15:05:07

他们做这种方式

function chgimage(imgDocID,imgObjName) 
{ 
    document[imgDocID].src = eval(imgObjName + '.src'); 
}

你希望它是一个实际的图像，也可以是一个背景是什么？

你的第一段代码看起来不错。你能告诉我们它在什么地方吗？我很好奇。

来源

2012-03-26 01:23:52 Puzzle84

将鼠标悬停在div更改中的图像

回答

相关问题