html - CSS 中的悬停问题

Question

每当我将鼠标悬停在文本上而不是文本的另一侧时，它会显示我的悬停..我想要它所以它只悬停在文本本身上而不是当我的鼠标在文本之外时。这是我的代码

<div class="MiniListAll">
  <ul>
    <li class="MiniListLI">  Christmas trees    </li>    
    <li class="MiniListLI">  Christmas lights   </li>  
    <li class="MiniListLI">   Ornaments         </li>   
    <li class="MiniListLI">  Tree toppers       </li>  
    <li class="MiniListLI">   Candle holders    </li>  
  </ul>
</div>

CSS

.MiniListLI{
    list-style-type: none;
    color: #737373;

}
.MiniListLI:hover{
    text-decoration: underline;
    color: black;

}   

我尝试用谷歌搜索答案，但没有找到任何结果。

Answer 1

你必须在 <li> 中使用行内元素标签:

HTML

<div class="MiniListAll">
  <ul>
    <li class="MiniListLI"><a href="#">Christmass trees</a></li>
    <li class="MiniListLI"><a href="#">Christmass lights</a></li>
    <li class="MiniListLI"><a href="#">Ornaments</a></li>
    <li class="MiniListLI"><a href="#">Tree toppers</a></li>
    <li class="MiniListLI"><a href="#">Candle holders</a></li>
  </ul>
</div>

CSS

.MiniListLI {
  list-style-type: none;
}
.MiniListLI a {
  text-decoration: none;
  color: #737373;
}
.MiniListLI a:hover {
  text-decoration: underline;
  color: black;
}

jsfiddle-link