Question

我正在使用html和css创建一个简单的图库页面。我把它编码到一个html查看器，它工作正常，但是当我在谷歌浏览器和IE浏览器打开它时onmouseover无法正常工作。当您浏览选定的缩略图时，它应该在底部框中显示较大的图像，但它不起作用。有人可以告诉我我做错了什么。非常感谢帮助！

<!DOCTYPE html>

<head>
<title>Gallery</title>

<style type="text/css">
body {
background: #222;
margin-top: 100px;
}

h3 {
color: #eee;
font-family: Verdana;
}

.thumbnails img {
height: 100px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}

</style>

</head>
<body>


<div class="gallery" align="center">


<div class="thumbnails">
    <img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>  
    <img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg"  alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg"  alt="Image Not Loaded"/>

</div></br>

<div class="preview" align="center">
    <img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>

</br>



</div>
</body>
</html>

Answer 1

你可以这样做 -

var thumbs = document.querySelectorAll('.thumbnails img');
for(var i = 0; i < thumbs.length; i++) {
    thumbs[i].addEventListener('mouseover',
    function(e) {
        console.log(e.target.src);
    });
}

Answer 2

尝试进行更改

<img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>

到

<img onmouseover=bigImg(this) id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>

Answer 3

最好使用源图像向图像添加数据属性，然后使用javascript / jQuery来获取它，例如在jQuery中

$(".thumbnail img").on("mouseover", function (){
     $(this).attr("src") = $(this).attr("data-previewsrc");
});

或者那种性质（在手机上键入代码并不理想）

Answer 4

Onmouseover属性用于javascript，不适用于您正在进行的操作。您可以在此属性中添加javascript。

Answer 5

我仍然支持我的评论，但如果您能够使用Javascript和JQuery，则以下代码有效：

$(function(){
    $('.thumbnails img').hover(function(){
        $('#preview').attr('src',$(this).attr('src'));
    },null);
});

这样做会改变预览div中图像的src与图像被鼠标悬停的内容。

Here is a jsfiddle

Answer 6

你必须获取元素，然后对它们进行操作：

将此代码添加到您的JavaScript文件中：

window.onload = addSrcs; // make sure images and other content has loaded, and fire addSrcs

function addSrcs() {
    var thumbs = document.querySelectorAll(".thumbnails img"), // the thumbnails
        bigBox = document.querySelectorAll(".preview")[0]; // the big box

    for (var i = 0; i < thumbs.length; i++) { // iterate over thumbs
        // on mouseover
        thumbs[i].addEventListener("mouseover", function (e) { 
            var src = e.target.src; // get the image's src
            bigBox.src = src; // set it to bigBox's src
        });
    }
}

onmouseover不在浏览器中工作

6 个答案: