所以我的代码有一个小问题。在我的<aside>元素中，我有一张表。我已经为表格中的每个图像添加了标题，但是它们只是在鼠标悬停在图像上时不会显示。我的css中也有一些东西，它会在将鼠标悬停在其上时更改表格行和文本的颜色。这也行不通。我已粘贴下面的相关代码，任何帮助表示赞赏。 ：d
HTML `
<aside class="second">
<center><u>Popular Champions</u></center>
<table border="1">
<tr>
<th>Champion</th>
<th>Playrate (%)</th>
<th>Lane</th>
<th>Difficulty</th>
</tr>
<tr>
<td><img src="Thresh.png" title="Thresh" alt="Thresh"/></td>
<td>42.75%</td>
<td>Support</td>
<td>2/5</td>
</tr>
<tr>
<td><img src="LeeSin.png" title="Lee Sin" alt="Lee Sin"/></td>
<td>38.14%</td>
<td>Jungle</td>
<td>4/5</td>
</tr>
<tr>
<td><img src="Caitlyn.png" title="Caitlyn" alt="Caitlyn"/></td>
<td>34.79%</td>
<td>ADC</td>
<td>1/5</td>
</tr>
<tr>
<td><img src="Ezreal.png" title="Ezreal" alt="Ezreal"/></td>
<td>25.14%</td>
<td>ADC</td>
<td>1/5</td>
</tr>
<tr>
<td><img src="Blitzcrank.png" title="Blitzcrank" alt="Blitzcrank"/></td>
<td>22.82%</td>
<td>Support</td>
<td>3/5</td>
</tr>
<tr>
<td><img src="Elise.png" title="Elise" alt="Elise"/></td>
<td>22.62%</td>
<td>Jungle</td>
<td>4/5</td>
</tr>
<tr>
<td><img src="Ahri.png" title="Ahri" alt="Ahri"/></td>
<td>17.15%</td>
<td>Middle</td>
<td>5/5</td>
</tr>
<tr>
<td><img src="Orianna.png" title="Orianna" alt="Orianna"/></td>
<td>16.50%</td>
<td>Middle</td>
<td>3/5</td>
</tr>
<tr>
<td><img src="Fiora.png" title="Fiora" alt="Fiora"/></td>
<td>16.18%</td>
<td>Top</td>
<td>4/5</td>
</tr>
<tr>
<td><img src="Graves.png" title="Graves" alt="Graves"/></td>
<td>15.98%</td>
<td>Jungle</td>
<td>2/5</td>
</tr>
</table>
</aside>
`
CSS
`
aside tr:hover {
background-color: white;
color: black;
}
`
修改 结果显示位于上方的超链接（在一个单独的元素中也没有注册任何形式的鼠标输入（不可点击的链接）我已粘贴下面的整个代码：
HTML `
<!doctype html>
<html>
<head>
<title>LoL Guide: Home</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<nav>
<a href="http://euw.leagueoflegends.com/" target="_blank">
<img src="Logo.png">
</a>
<h1>League Of Legends Beginner's Guide</h1>
<ul>
<li>Home</li>
<li><a href="page2.html">Champions</a></li>
<li><a href="page3.html">Gameplay</a></li>
</ul>
</nav>
</header>
<aside class="New">
<center> <u>Useful Links</u> </center>
<ul>
<li><a href="http://euw.leagueoflegends.com/" target="_blank">Official League of Legends website.</a> </li>
<li><a href="http://leagueoflegends.wikia.com/wiki/League_of_Legends_Wiki" target="_blank">Official League of Legends Wiki</a> </li>
<li><a href="https://www.reddit.com/r/leagueoflegends/" target="_blank">Official League of Legends Reddit</a> </li>
</ul>
</aside>
<aside class="second">
<center><u>Popular Champions</u></center>
<table border="1">
<tr>
<th>Champion</th>
<th>Playrate (%)</th>
<th>Lane</th>
<th>Difficulty</th>
</tr>
<tr>
<td><img src="Thresh.png" title="Thresh" alt="Thresh"/></td>
<td>42.75%</td>
<td>Support</td>
<td>2/5</td>
</tr>
<tr>
<td><img src="LeeSin.png" title="Lee Sin" alt="Lee Sin"/></td>
<td>38.14%</td>
<td>Jungle</td>
<td>4/5</td>
</tr>
<tr>
<td><img src="Caitlyn.png" title="Caitlyn" alt="Caitlyn"/></td>
<td>34.79%</td>
<td>ADC</td>
<td>1/5</td>
</tr>
<tr>
<td><img src="Ezreal.png" title="Ezreal" alt="Ezreal"/></td>
<td>25.14%</td>
<td>ADC</td>
<td>1/5</td>
</tr>
<tr>
<td><img src="Blitzcrank.png" title="Blitzcrank" alt="Blitzcrank"/></td>
<td>22.82%</td>
<td>Support</td>
<td>3/5</td>
</tr>
<tr>
<td><img src="Elise.png" title="Elise" alt="Elise"/></td>
<td>22.62%</td>
<td>Jungle</td>
<td>4/5</td>
</tr>
<tr>
<td><img src="Ahri.png" title="Ahri" alt="Ahri"/></td>
<td>17.15%</td>
<td>Middle</td>
<td>5/5</td>
</tr>
<tr>
<td><img src="Orianna.png" title="Orianna" alt="Orianna"/></td>
<td>16.50%</td>
<td>Middle</td>
<td>3/5</td>
</tr>
<tr>
<td><img src="Fiora.png" title="Fiora" alt="Fiora"/></td>
<td>16.18%</td>
<td>Top</td>
<td>4/5</td>
</tr>
<tr>
<td><img src="Graves.png" title="Graves" alt="Graves"/></td>
<td>15.98%</td>
<td>Jungle</td>
<td>2/5</td>
</tr>
</table>
</aside>
<div class="row">
<div class="col">To become a good League of Legends player, there is a great learning curve. During this curve, the player is expected to master each of the key features of the game, in order to dominate their opposition. During the course of this guide, My aim will be to both educate you and to attempt to provide you with an understanding of the many key gameplay aspects that the game posseses.
<hr>
<center><u>An Ever Changing Meta</u></center>
Riot Games (League of Legend's developers) frequently update the game, sometimes as often as every two weeks. This brings new content constantly, with almost constant changes to various champions.
<br>
<center><img src="Malhazar.jpg" alt="Malhazar" height="300" width="630" border="5" title="Malhazar"></center>
Levels 1 to 30 are fairly straight forward, allowing the player to become experienced at the game. After the player reaches level 30, they can play ranked. Ranked is a much harder version of the game, where people will be trying their hardest, in order to try and attain a high rank. The ranks are shown below.
<div class="slider">
<figure>
<div class="slide">
<p>Bronze</p>
<img src="bronze.png" alt="Bronze">
</div>
<div class="slide">
<p>Silver</p>
<img src="silver.png" alt="Silver">
</div>
<div class="slide">
<p>Gold</p>
<img src="gold.jpg" alt="Gold">
</div>
<div class="slide">
<p>Platinum</p>
<img src="platinum.jpg" alt="Platinum">
</div>
<div class="slide">
<p>Diamond</p>
<img src="diamond.png" alt="Diamond">
</div>
<div class="slide">
<p>Challenger</p>
<img src="challenger.jpg">
</div>
</figure>
</div>
<br>
Using an account that is already level 30, when first starting the game is generally discouraged. This is because the game will match you against <u>Any</u> level 30 players. This means anything from Bronze players, through to Diamond. With over 100 champions, its safe to say that with the broad range of champions available, any one of them can be effective when played right. This makes it a simple case of finding your main.
<hr>
<center><u>Free Rotation</u></center>
Every week, there are 10 champions on free rotation. During this time, anyone can pick them and play as them. The 10 champions usually range in both champion type and popularity. As the 10 champions change every week, this gives users a chance to play a wide range of champions, and may influence their decision as to whether they want to purchase it.
<br>
<center><img src="freerotation.jpg" alt="Malhazar" height="300" width="630" border="5" title="Current Free rotation"></center>
<u>This Week's free rotation is as follows:</u>
<ol>
<li> Ashe. -<i>The Frost Archer.</i> </li>
<li> Vel'Koz. -<i>The Eye Of The Void.</i></li>
<li> Yorick. -<i>The shepherd Of Souls.</i> </li>
<li> Azir. -<i>The Emperor Of The Sands.</i></li>
<li> Rammus. -<i>The Armordillo.</i></li>
<li> Caitlyn. -<i>The Sheriff Of Piltover.</i></li>
<li> Fiddlesticks. -<i>The Harbinger Of Doom.</i></li>
<li> Ekko. -<i>The Boy Who Shattered Time.</i> </li>
<li> Karma. -<i>The Enlightened One.</i> </li>
<li> Kennen. -<i>The Heart Of The Tempest.</i></li>
</ol>
</div>
</div>
<footer class="Footer">
<table>
<th>Contact Us</th>
<th>Home</th>
<th>Champions</th>
<th>Gameplay</th>
</table>
</footer>
</body>
</html>
`
CSS `
body {
margin: 0;
background-image: url("backgroundimage.png");
padding-bottom: 20px;
}
header {
background: linear-gradient(#2e2e30, #cbcbd6);
color: black;
padding: 15px 15px 0 10px;
}
header h1{
margin: 0;
display: inline;
padding: 0 0 0 15px;
text-decoration: underline;
}
nav ul{
margin: 0;
display: inline;
padding: 0 0 0 15px;
}
nav img {
float: left;
width: 80px;
height: 50px;
position: relative;
top: -13px;
}
nav ul li {
list-style-type: none;
display: inline-block;
background: #333;
color: white;
padding: 5px 15px;
}
nav ul li a {
color: white;
}
nav ul li a:hover{
padding: 5px 15px;
}
.row:after {
clear: both;
content: **;
display: table;
}
.col {
float: left;
background: #333;
width: 60%;
margin: .5%;
border-radius: 5px;
padding: .5%;
color: white;
position: relative;
top: -16px;
}
footer {
clear: both;
}
aside {
float: right;
background: #333;
width: 30%;
margin: .5%;
border-radius: 5px;
padding: .5%;
color: white;
position: relative;
left: -50px;
}
center u {
font-size: 25px;
}
aside a {
color: white;
}
.slider .slide p {
font-size: 20px;
text-align: left;
position: relative;
width: 20%;
padding-top 10px;
right: -130px;
}
.slider {
overflow: hidden;
height: 300px;
}
.slider figure div {
width: 20%;
float: left;
}
.slider figure img{
width: 300px;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 20px;
animation: 30s slidy infinite;
}
@keyframes slidy{
0% {
left: 0%;
}
10% {
left: 0%;
}
12%{
left: -100%;
}
22% {
left: -100%;
}
24% {
left: -200%;
}
34% {
left: -200%;
}
36% {
left: -300%;
}
46% {
left: -300%;
}
48% {
left: -400%;
}
58% {
left: -400%;
}
60% {
left: -300%;
}
70% {
left: -300%;
}
72% {
left: -200%;
}
82% {
left: -200%;
}
84% {
left: -100%;
}
94% {
left: -100%;
}
96% {
left: 0%;
}
100% {
left: 0%;
}
}
.slider {
position:;
right: -250px;
top: -10px;
height: 370px;
float: left;
}
.second {
position: relative;
left: 381.5px;
top: 160px;
}
.row {
position: absolute;
top: 62px
}
aside table{
text-align: center;
}
#footer {
overflow: hidden;
}
aside table img{
display:block;
}
footer {
float: left;
background: #333;
width: 100%;
height: 50px;
margin: .5;
border-radius: 5px;
padding: .5%;
color: white;
position: relative;
top: 350px;
}
aside tr:hover {
background-color: black;
color: white;
}
`
答案 0 :(得分：0)
您的.row DIV已position: absolute并且完全覆盖了第一个旁边元素，这就是为什么鼠标指针不会改变且没有点击可以通过链接。要么改变那个àbsolute`，要么进一步向右移动以解决问题。