Question

我有一张我最喜欢的电影表。当用户将鼠标悬停在电影名称上时，我想显示电影的海报。我设法做了一个元素：

<body>
    <h2> My Top 10 Movies </h2>
    <table>
        <tr>
            <th>Rank</th>
            <th>Title</th>
            <th>Director</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>01</td>
            <td onmouseover="imageAppear()" onmouseout="imageDisappear()">Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/></td>
            <td>Nicolas Winding Refn</td>
            <td>2011</td>
        </tr>
    </table>

    <script>
    function imageAppear() { 
    document.getElementById('place-holder-1').style.visibility = "visible";}

    function imageDisappear() { 
    document.getElementById('place-holder-1').style.visibility = "hidden";}

    </script>
</body>

我的问题是，如果不为每部电影编写X功能，我怎样才能为多个项目做同样的事情？我尝试使用类，但它似乎不起作用（即使它确实如此，当用户将鼠标悬停在任何标题上时，它会显示所有图片）。

Answer 1

您可以将元素的id作为函数的参数：

    <script>
    function imageAppear(id) { 
    document.getElementById(id).style.visibility = "visible";}

    function imageDisappear(id) { 
    document.getElementById(id).style.visibility = "hidden";}

    </script>

在你的桌子上叫它：

    <table>
        <tr>
            <th>Rank</th>
            <th>Title</th>
            <th>Director</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>01</td>
            <td onmouseover="imageAppear('place-holder-1')" onmouseout="imageDisappear('place-holder-1')">Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/></td>
            <td>Nicolas Winding Refn</td>
            <td>2011</td>
        </tr>
    </table>

Answer 2

使用jQuery（因为您正在使用JS编写解决方案，我认为它对您没问题）

你可以这样：

<body>
 <h2> My Top 10 Movies </h2>
    <table>
        <tr>
            <th>Rank</th>
            <th>Title</th>
            <th>Director</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>01</td>
            <td>Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; display: none;"/></td>
            <td>Nicolas Winding Refn</td>
            <td>2011</td>
        </tr>
    </table>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    jQuery(function($){
        $('tr td:nth-child(2)').mouseenter(function(){
            $(this).find('img').show();
        });
        $('tr td:nth-child(2)').mouseleave(function(){
            $(this).find('img').hide();
        });
    });
    </script>
</body>

Answer 3

<强> HTML

<table>
    <tr>
        <td>01</td>
        <td class="imageHover"></td>
        <td>Nicolas Winding Refn</td>
        <td>2011</td>
    </tr>
 <tr>
        <td>02</td>
        <td class="imageHover img1"></td>
        <td>Nicolas Winding Refn</td>
        <td>2012</td>
    </tr>

<强> CSS

  .imageHover:hover{
    background:url('http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg');
}

.img1:hover{

    background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhKewtNASQ-YZiNOWGXach389U4ZvUiVUyvrxLCAt0OQcR3Evh');
}
.imageHover{
    width:100px;
    height:100px;
}

.imageHover:before{
    content:'Drive';
}

DEMO

在鼠标上显示图像的元素

3 个答案: