1

我有一个嵌套在父元素中的链接元素的代码，类似于这样：

<div class="container">
    <div class="navbar">
        <li><a href="#" class="linkitem">Hello</a></li>
        <li><a href="#" class="linkitem">Hello</a></li>
        <li><a href="#" class="linkitem">Hello</a></li>
        <img src="img">
    </div>
</div>

我想这样做，以便链接采用导航栏的高度，该高度由图像的高度和各种边距/填充属性决定。我想这样做，这样我就可以创建一些 CSS 来实现它，这样当链接悬停在上面时，看起来链接所在的导航栏部分的整个背景正在改变颜色，如下所示：

.navbar > li > a:hover {
background-color:red;
}

但就目前而言，仅突出显示链接文本的小背景，而不是包含链接的导航栏的整个部分。我不想这样做，li:hover因为我只希望在选择实际链接文本时背景改变颜色。想法？

4

2 回答 2

1

如果我正确理解了您的问题，那么解决方法很简单；只需应用于display:block;锚标签：

.navbar > li > a {
  display:block;   
}

在这里查看：http: //jsfiddle.net/DrTH9/

文档

于 2013-02-25T16:56:23.127 回答
-1

尝试这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="container">
        <ul class="navbar">
            <li><a href="#" class="linkitem">Hello</a></li>
            <li><a href="#" class="linkitem">Hello</a></li>
            <li><a href="#" class="linkitem" >Hello</a></li>
            <li class="imgItem">
                <img src="http://placehold.it/50"  />
            </li>
        </ul>
    </div>
    <style>
        .container,
        .navbar,
        .navbar li,
        .navbar li a
        {
            margin: 0;
            padding: 0;
        }
        .navbar{
            display: table;
        }
        .navbar li{
            display: table-cell;
            padding: 0 1em; /* you can have horizontal padding on these if you like */
            vertical-align: middle;
        }
        .navbar li.imgItem{
            padding: 0; /* Clear padding from image item */
        }
        .navbar li.hover,
        .navbar li:hover{
            background: red;
            cursor: pointer;
        }
        .navbar img{
            margin: -5px 0 0 0;
            top: 5px;
            position: relative;
            /* 
                This fixes a weird bug where the table puts 5px on the bottom of an image that defines a cell's height. 
                NO idea why this is. You may need to mess with this.
            */
        }
    </style>
</body>
</html>
于 2013-02-25T20:00:02.087 回答