我正在尝试滑动 - 中间：hover：显示不同的背景颜色，具体取决于悬停的链接。我假设有一种方法可以将id＃附加到函数中，并根据我附加到html的id显示颜色，但我无法弄明白。
html {
position: relative;
min-height: 100%;
}
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526, #414345);
background: linear-gradient(to right, #232526, #414345);
margin: 0em;
}
a {
cursor: pointer;
cursor: hand;
}
#navbar {
position: fixed;
width: 100%;
top: : 0;
height: 40px;
background: #e4e6e5;
background-color: rgba(228, 230, 229, .8);
border-top: solid transparent 5px;
z-index: 250;
text-align: center;
}
#navbar a {
text-decoration: none;
padding: 0 2% 0 2%;
font-family: sans-serif;
font-size: 12px;
color: #666666;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
height: 135px;
background: #e4e6e5;
background-color: rgba(228, 230, 229, .8);
-webkit-transform: translateZ(0);
border-top: solid transparent 5px;
z-index: 250;
}
.inline {
display: inline-block;
margin: .5em;
}
.wrap {
display: table;
height: 100px;
width: 360px;
}
#wrap_left {
text-align: left;
}
#wrap_left a {
text-decoration: none;
padding: 0 2% 0 2%;
font-family: sans-serif;
font-size: 12px;
color: #888888;
}
#wrap_right {
text-align: right;
}
.linebreak {
padding-top: 3px;
}
#content {
padding: 50px 0 140px 100px;
}
#sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
#sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#sliding-middle-out:hover:after {
width: 100%;
background: grey;
}
.material-icons.md-14 {
font-size: 14px;
}<div id="navbar">
<a id="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a>
<a id="sliding-middle-out" href="Warrior.html"><i class="material-icons md-14">delete_forever</i>Warrior</a>
<a id="sliding-middle-out" href="Druid.html"><i class="material-icons md-14">spa</i>Druid</a>
<a id="sliding-middle-out" href="Priest.html"><i class="material-icons md-14">wifi</i>Priest</a>
<a id="sliding-middle-out" href="Paladin.html"><i class="material-icons md-14">star_half</i>Paladin</a>
<a id="sliding-middle-out" href="Hunter.html"><i class="material-icons md-14">my_location</i>Hunter</a>
<a id="sliding-middle-out" href="Mage.html"><i class="material-icons md-14">whatshot</i>Mage</a>
<a id="sliding-middle-out" href="Shaman.html"><i class="material-icons md-14">nature_people</i>Shaman</a>
<a id="sliding-middle-out" href="Warlock.html"><i class="material-icons md-14">person_outline</i>Warlock</a>
<a id="sliding-middle-out" href="Rogue.html"><i class="material-icons md-14">visibility_off</i>Rogue</a>
<a id="sliding-middle-out" href="Minions.html"><i class="material-icons md-14">keyboard_arrow_up</i>Minions</a>
<a id="sliding-middle-out" href="Spells.html"><i class="material-icons md-14">keyboard_arrow_down</i>Spells</a>
</div>
<!-- navbar -->
<div id="content">
<a href="../Cards/1/Jade_Idol.html">
<img src="../Cards/1/Jade_Idol_S.png">
</a>
<a href="../Cards/1/Mark_of_the_Lotus.html">
<img src="../Cards/1/Mark_of_the_Lotus_S.png">
</a>
<a href="../Cards/3/Celestial_Dreamer.html">
<img src="../Cards/3/Celestial_Dreamer_S.png">
</a>
<a href="../Cards/3/Jade_Blossom.html">
<img src="../Cards/3/Jade_Blossom_S.png">
</a>
<a href="../Cards/3/Pilfered_Power.html">
<img src="../Cards/3/Pilfered_Power_S.png">
</a>
<a href="../Cards/4/Jade_Spirit.html">
<img src="../Cards/4/Jade_Spirit_S.png">
</a>
<a href="../Cards/5/Lotus_Agents.html">
<img src="../Cards/5/Lotus_Agents_S.png">
</a>
<a href="../Cards/5/Lunar_Visions.html">
<img src="../Cards/5/Lunar_Visions_S.png">
</a>
<a href="../Cards/5/Virmen_Sensei.html">
<img src="../Cards/5/Virmen_Sensei_S.png">
</a>
<a href="../Cards/6/Aya_Blackpaw.html">
<img src="../Cards/6/Aya_Blackpaw_S.png">
</a>
<a href="../Cards/6/Jade_Behemoth.html">
<img src="../Cards/6/Jade_Behemoth_S.png">
</a>
<a href="../Cards/10/Kun_the_Forgotten_King.html">
<img src="../Cards/10/Kun_the_Forgotten_King_S.png">
</a>
</div>
<!-- content -->
<center>
<div class="footer">
<div class="inline">
<div class="wrap">
<div id="wrap_right">
<font color="888888" size="4%">CARDSPOILER.COM</font>
<br>
<font color="9B764C" size="3%">Freedom to know</font>
<p></p>
<font size="2%" color="666666">We are here to bring you visual, leaked spoilers for all of the cards you love within a simple gallery setting.</font>
<br>
<font color="#333333">
<a href="mailto:help@cardspoiler.com" style="text-decoration:none;color:#9B764C;font-size:70%;">CONTACT US</a>
<a href="../../Privacy_Policy.html" style="text-decoration:none;color:#9B764C;font-size:70%;">PRIVACY POLICY</a>
</font>
</div>
<!-- inline -->
</div>
<!-- wrap -->
</div>
<!-- wrap_left -->
<div class="inline">
<div class="wrap">
<div id="wrap_left">
<td><a href="MSoG.html">Mean Streets of Gadgetzan</a>
</td>
<br>
<td><a href="ONiK.html">One Night in Karazhan</a>
</td>
<br>
<td><a href="WotOG.html">Whispers of the Old Gods</a>
</td>
<br>
<td><a href="tLoE.html">The League of Explorers</a>
</td>
<br>
<td><a href="TGT.html">The Grand Tournament</a>
</td>
<br>
<td><a href="BrM.html">Blackrock Mountain</a>
</td>
<br>
</div>
<!-- inline -->
</div>
<!-- wrap -->
</div>
<!-- wrap_left -->
</div>
<!-- footer -->
答案 0 :(得分：0)
在评论中说的是，ID 必须是唯一的。
您应该将#sliding-middle-out更改为.sliding-middle-out并将其用作课程，然后为每个元素添加ID。
类似的东西：
HTML：
<a id="home" class="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a>
的CSS：
#home.sliding-middle-out:hover:after {
background-color: blue;
}