Question

我理解这个的基本概念，例如：

a img { display:none; }
a:hover img { display:block; }

<a href="#">Hover over me<img src="http://www.samiles.com/blog/wp-content/uploads/2010/04/Hover-Cats.gif" /></a>

但是我在我的网站上工作，在这里：http://www.nsgaming.us/games/

我希望访问者将鼠标悬停在某个链接上，并让图片显示在与右边对齐的表格中（之后我将删除该表格的边框）。

如何将HTML部分拆分为两个表？

此页面的完整CSS / HTML如下：

<html>
    <head>
        <title>games - nsgaming.us</title>
        <?php 
    include("../menu.php");
 ?>
    </head>
<style>
links{
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:active {text-decoration:bold;}
font-size:150%;
}
</style>

    <body>
<links>
<p> <disclaimer> Software listed here is in no way affiliated with nsgaming.us </disclaimer> <p>
<table align=left frame=border width=50% cellpadding=7px><td>

<a href="http://www.cataclysmdda.com">Dark Days Ahead (DOS based Rouge-Like game)</a> -
 <a href="http://assets.cataclysmdda.com/downloads/windows_binaries/cddasdl-current.zip"><b>Download</b></a><br>

<a href="http://www.byond.com/games/exadv1/spacestation13">Spacestation13</a><br>

<a href="http://digital-synthesis.com/games/view/40">Zzzz Zzzz Zzzz</a> -
 <a href="http://www.digital-synthesis.com/games_files/Zzzz-Zzzz-Zzzz.zip"><b>Download</b></a><br>

<a href="http://kayin.pyoko.org/iwbtg/">I wanna be the guy</a> -
 <a href="http://gamejolt.com/games/i-wanna-be-the-guy/download-distribution/6/?os=windows"><b>Download</b></a><br>

</td></table>
</links>

<!-- Right-hand table (try to make invis, show screenshots of games on hover game name -->
<table align=right frame=border width=49% cellpadding=7px><td>
test
</td></table>

</body>
</html>

文本悬停，图像显示在右表中

0 个答案: