所以我的代码有一个小问题。在我的 <aside>元素，我有一张 table 。我已经为表格中的每个图像添加了标题，但是当鼠标悬停在图像上时它们根本不显示。我的 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;
}
`
最佳答案
你的 .row DIV 有 position: absolute 并且完全覆盖了第一个 aside 元素，这就是为什么鼠标指针没有改变并且没有点击可以通过到链接。要么改变 àabsolute` 要么将一边进一步向右移动以修复它。
关于html - 表元素未检测到 :hover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44349341/