2

http://jsfiddle.net/TsRJy/にdivボックスを含むグリッドを作成しました。

問題

a：hoverを機能させる方法がわかりません。

情報

  • HTMLコードをテーブルとして書き直すことは、私にとってオプションではありません。
  • http://www.normann-copenhagen.com/Productsはこの問題で成功しました。
  • 私はJavascriptよりもCSSを好みます。

HTML（jsfiddleが機能しない場合）

<div class="container">
    <div class="grid">
        <div class="item">
            <a href="#">
            </a>
        </div>
        <div class="item">
            <a href="#">
            </a>
        </div>
        <div class="item">
            <a href="#">
            </a>
        </div>
        <div class="item">
            <a href="#">
            </a>
        </div>
        <div class="item">
            <a href="#">
            </a>
        </div>
        <div class="item">
            <a href="#">
            </a>
        </div>
        <div class="item">
            <a href="#">
            </a>
        </div>
    </div>
</div>

CSS

.container {
    margin: 0 auto;
    width: 500px;
}

.item {
    border: 1px solid #ccc;
    float: left;
    margin: 0 -1px -1px 0;
}

.item a {
    display: block;
    height: 100px;
    width: 100px;
    background: #f5f5f5;
}
.item a:hover {
    border: 1px solid black;
}​
​
4

5 に答える 5

4

これには、ボックスサイズ設定プロパティを使用できます。このように書いてください：

.item a:hover {
    border: 1px solid black;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

これをチェックしてくださいhttp://jsfiddle.net/TsRJy/1/

于 2012-09-04T06:28:06.430 に答える
1

ボーダーを入れたため、ホバー効果が効きません。

.item a:hover {
    box-shadow: 2px 2px 2px #333;
    background-color:Teal
}​

このフィドルを見てください

また、ここに便利なリンクがあります

于 2012-09-04T06:33:38.743 に答える
1

また、別の方法として、境界線の色をボックスの背景色と同じ色に設定し、ホバー時に黒に変更することもできます。

.item a {
    display: block;
    height: 100px;
    width: 100px;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
}
.item a:hover {
    border-color: black;
}​

デモ： http： //jsfiddle.net/TrXT9/1/

于 2012-09-04T06:38:49.127 に答える
1

ラッパーの幅が500pxになっているようです。幅100px、境界線1px、マージン右-1pxのdivを作成した場合、divは101pxのままです。

box-sizing:border-boxこの問題を解決するための美しい方法ですが、IE7ではサポートされていません

IE7をサポートする場合は、次のように幅と高さを調整する必要があります：http:
//jsfiddle.net/TsRJy/5/

于 2012-09-04T06:50:50.240 に答える
1

これを試してみてください、cssのほんの小さな変更

.container {
    margin: 0 auto;
    width: 500px;
}

.item { float: left; }

.item a {
    display: block;
    height: 99px;
    width: 99px;
    background: #f5f5f5;
    border: solid 1px #d6d6d6;
    border-width: 0 1px 1px 0;
}

.item a:hover {
    border: solid 1px #f00;
    margin: -1px 0 0 -1px;
}

http://jsfiddle.net/GtR3P/

より正確な結果を得るには、これを試してみてください。これで問題が解決することを願っています

.container {
    margin: 0 auto;
    width: 506px;
}

.item { float: left; }

.item a {
    display: block;
    height: 100px;
    width: 100px;
    background: #f5f5f5;
    border: solid 1px #d6d6d6;
    border-width: 0 1px 1px 0;
}

.item a:hover {
    border: solid 1px #f00;
    margin: -1px 0 0 -1px;
}

.grid .item:nth-child(5n+1) a { border-left-width:1px; }

.grid .item:nth-child(5n+1) a:hover { margin:-1px 0 0 0; }
于 2012-09-04T08:49:33.837 に答える