Question

所以我想要一个导航栏，当我将鼠标悬停在一个li / a元素上时，我会为导航栏的FULL高度获得不同的颜色。因为当我将鼠标悬停在它上面时，只有文本的背景颜色发生变化......这非常难看......

我希望这很清楚，但系统阻止我上传图片：o。

谢谢！

编辑：我忘记了HTML和CSS：

    <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>

    #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover {
    background-color: orange;
}

#nav a, a:active {
    color: white;
    text-decoration: none;
}

Answer 1

这是一个简单的解决方案，可以在悬停时更改背景颜色。

ul li a:hover {
background-color: blue;

}

Answer 2

添加：height: 100%;

收件人：#nav li {

应该这样做！

Answer 3

背景颜色仅适用于文字背景，因为您使用的是display: inline;

任何给内联元素的背景都将仅适用于其内容，不同于将应用于整个元素的块元素。

最简单的解决方案是将显示更改为inline-block，如下所示：

#nav li
{
 display: inline-block;
}

JSBin

Answer 4

将display:inline-block添加到a并为其提供等于nav的高度。我建议这样，因为li上的设置高度会将文本作为链接。在a上设置它将使整个高度链接

 #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover a{
    background-color: orange;
}

#nav a, a:active {
    display:inline-block;
    height:60px;
    color: white;
    text-decoration: none;
}

 <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>

Answer 5

您需要在列表项上设置import java.io.*; import java.util.*; import java.util.function.*; import java.util.stream.Collectors; import java.util.stream.*; public class HelloWorld{ public static void main(String []args){ LinkedHashMap<Integer,Integer> hashMap = new LinkedHashMap<Integer,Integer>(); hashMap.put(1,5); hashMap.put(7,9); hashMap.put(3,8); hashMap.put(10,5); Function<Map.Entry<Integer,Integer>,Integer> keyMapper = x->x.getKey(); Function<Map.Entry<Integer,Integer>,Integer> valueMapper = x->x.getValue(); BinaryOperator< Integer> mergeFunction = (x,y)->x;// we do not want any merging here Supplier<LinkedHashMap<Integer,Integer>> mapRequired =()-> {return new LinkedHashMap<Integer,Integer>();};// to maintain order we must use LinkedHashMap Comparator<Map.Entry<Integer,Integer>> descendingComparator = (x,y)->y.getKey().compareTo(x.getKey()); // we can write it as System.out.println( hashMap.entrySet().stream() .sorted (descendingComparator) .collect(Collectors.toMap( keyMapper, valueMapper, mergeFunction, mapRequired) ) ); // or even by writing below will also work System.out.println( hashMap.entrySet().stream() .sorted ((x,y)->y.getKey().compareTo(x.getKey())) .collect(Collectors.toMap( x->x.getKey(), x->x.getValue(), (x,y)->x, LinkedHashMap::new) ) ); } }。否则，这些项目的行为就像文字元素（display: inline-block所做的那样），并且display: inline之外不能有任何其他高度。

请参阅此pen

导航栏 - LI：HOVER全高

5 个答案: