文章/答案/技术大牛

发布

问表元素未检测到:悬停
EN

Stack Overflow用户

提问于 2017-06-03 23:12:21

回答 1查看 82关注 0票数 0

所以我的代码有个小问题。在我的<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;
}

html

css

hover

回答 1

Stack Overflow用户

发布于 2017-06-03 23:17:38

您的.row DIV有position: absolute，并且正在完全覆盖第一个备用元素，这就是为什么鼠标指针不会改变，并且没有点击可以通过链接。要么改变这一点，要么将其进一步移至解决问题的权利。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44349341

复制

相似问题

问表元素未检测到:悬停
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表元素未检测到:悬停EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表元素未检测到:悬停
EN