表元素不檢測：懸停

所以我有一個小問題，我的代碼。在我的<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

EDIT 原來超鏈接位於上方（在一個單獨的元件，也沒有登記任何形式鼠標輸入的（不可點擊鏈接）我已經粘貼下面我的整個代碼：

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

來源

2017-06-03 JDG2017

您.row DIV有position: absolute並完全覆蓋第一aside元素，這就是爲什麼鼠標指針不改變，不點擊才能通過鏈接。要麼改變那個àbsolute`或者把它移到右邊來解決這個問題。

來源

2017-06-03 23:17:38 Johannes

我已經注意到，第一個

我不知道你在說哪個鏈接，但懸停* IS *的工作，你可以看到我的代碼片段（和標題顯示在那裏工作）。 – Johannes

我用我的整個腳本更新了我的問題。相關鏈接位於

表元素不檢測：懸停

回答

相關問題