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

Answer 2

这是一种方式：

CSS：

.MiniListLI{
   list-style-type: none;
}

.MiniListLI a {
   text-decoration: none;
   color: #737373;
}

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

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中的问题

2 个答案: