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 に答える