4

ホバーしたときにリンクされた画像の下部にのみ線を表示するにはどうすればよいですか?

ホバー時に表示する内側の境界線を取得できますが、border-bottom のみを表示したいです。

これは、境界線の代わりにアウトライン プロパティを使用しているにもかかわらず、これまでのところ私が持っているものです。

#links a img, #links a{ border: none; float: left; }
#links a{ margin: 3px; }
#links a:hover{ outline: 3px solid black; }

ホバリングされていない:

ここに画像の説明を入力

ホバリング:

ここに画像の説明を入力

4

6 に答える 6

8

border-bottomプロパティを割り当てるだけ:hoverです：

#links a:hover{
    border-bottom: 3px solid #00f; /* or whatever colour you'd prefer */
    outline: 3px solid black;
}

「アンカー画像」というフレーズが要素内にあるimgことを意味する場合、次のことをお勧めします。a

#links a:hover img {
    border-bottom: 3px solid #00f; /* or whatever you'd prefer */
}
于 2013-03-04T18:45:57.580 に答える
0

画像を div に入れ、マスク div を追加します。

#mask {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 3px solid transparent;
}
#mask:hover {
  border-bottom: 3px solid cyan;
}
#outerDiv {
  display: inline-block;
  position: relative;
}
img {
  display: block;
}
<div id='outerDiv'>
  <img src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=32&d=identicon&r=PG" />
  <div id='mask'></div>
</div>

于 2016-11-29T12:52:59.327 に答える