Javascript 在鼠标上显示表格元素的图像_Javascript_Html_Css

Javascript 在鼠标上显示表格元素的图像

javascript html css

Javascript 在鼠标上显示表格元素的图像,javascript,html,css,Javascript,Html,Css,我有一张我最喜欢的电影的桌子。我想在用户将鼠标悬停在电影名称上时显示电影海报。我成功地做到了一个要素： <body> <h2> My Top 10 Movies </h2> <table> <tr> <th>Rank</th> <th>Title</th> <th>Direc

我有一张我最喜欢的电影的桌子。我想在用户将鼠标悬停在电影名称上时显示电影海报。我成功地做到了一个要素：

<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>


我的十大电影
等级
标题
经理
年
01
驱力
尼古拉斯绕组参考文献
2011
函数ImageAspect（）{
document.getElementById（'place-holder-1'）.style.visibility=“visible”；}
函数imagedemouse（）{
document.getElementById（'place-holder-1'）.style.visibility=“hidden”}

我的问题是，我如何在不为每部电影编写X函数的情况下对多个项目执行相同的操作？我尝试使用类，但它似乎不起作用（即使它起作用，当用户将鼠标悬停在任何标题上时，它也会显示所有图片）。

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

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

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

    </script>


函数ImageDisplay（id）{
document.getElementById（id）.style.visibility=“可见”；}
函数（id）{
document.getElementById（id）.style.visibility=“hidden”；}

在你的桌子上叫它：

    <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>


等级
标题
经理
年
01
驱力
尼古拉斯绕组参考文献
2011

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>

使用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>


我的十大电影
等级
标题
经理
年
01
驱力
尼古拉斯绕组参考文献
2011
jQuery（函数（$）{
$（'trtd:nth child（2）'）.mouseenter（函数（）{
$（this.find（'img'）.show（）；
});
$（'trtd:nth child（2）'）.mouseleave（函数（）{
$（this.find（'img'）.hide（）；
});
});

Hi Kawinesh，除非我遗漏了什么，否则您的解决方案只有在每个条目都必须显示相同的海报时才有效，我错了吗？我需要能够为每个条目显示不同的图像。@Sparrot现在只需查看演示。使用Diff类并更改背景url。

<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>