Question

我想要“链接”，这些不是真正的链接，它们实际上是设备的标题或者我想要审查的内容。

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

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

简单的想法是，我会举例如：

图片在这里

设备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 - Tryout 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
}

Answer 1

使用

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。

Answer 2

他们这样做

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

您希望它是实际图像还是背景？

你的第一段代码看起来很好。你能告诉我们它在某处做了什么吗？我很好奇。

鼠标在div上的图像更改

2 个答案: