Question

我希望能够将鼠标悬停在阴影框上打开它，我已经搜索了一段时间，但我仍然不完全理解如何操作它的概念。这是我的HTML：

<table id="tapaintings">
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/t_painting1.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting2"> <img src="images/thumbnails/t_painting2.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting3"> <img src="images/thumbnails/t_painting3.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting4"> <img src="images/thumbnails/t_painting4.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/t_painting5.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/t_painting6.jpg" alt="painting"></a></td>
            </tr>
        </table>

到目前为止

和我的jquery：

$(document).ready(function() {
    $("img").mouseenter(function() {
        $(this).attr("src", "images/painting1.jpg");
    });
});

我刚刚尝试将第一张图片放大，但我希望能够将鼠标悬停在任何缩略图上，并能够打开我的影子框。我希望能够不断循环浏览照片，以便我可以关闭使用mouseleave的影子箱。我是jQuery的初学者，所以我一直无法掌握这个概念，所以任何帮助都会受到赞赏。

Answer 1

我认为你错过了jQuery对象声明前面的$。还要确保你的文件有扩展名（.jsp; .png;等）。试试这个（我还没有验证）：

$(document).ready(function(){
    $("img").mouseenter(function() {
        $(this).attr("src", images/painting1.jsp);
    });
});

Answer 2

你的意思是这样吗？

$(function(){
    $('#tapaintings a').mouseenter(function(){
        var id = $(this).attr('id');
        $('a#' + id + ' img').animate({
            'height' : '80px',
            'width'  : '80px'
        });
    });
.........

请参阅this fiddle

使用.attr（）打开mouseenter上的Shadowbox

2 个答案: