1

ホバーしたときに非表示のh2+P（CSSを使用）を表示するdivを取得しようとしていますが、div全体（h2 + pを含む）をXにリンクできるようにします。

これまで私がうまく機能させる唯一の方法は、Aをすべてラップさせることですが、これはもちろんHTML5のみが有効であるため、一部のブラウザー（IE）はそれを気に入らないでしょう。

<a href="#">
 <div class="one">
    <img src="#">
    <p>one</p>
 </div>
</a>

<a>また、ホバー時に色を変更したいので、各ブロックを個別に指定することはできません。そのため、div全体をホバー可能にする必要があります。そして、私がそのように行ったとしても、確かに投稿の抜粋（<P>）を与えることは確かにseoにとって悪いでしょう？

基本的に、これが最終結果になりたいものです。

<div class="one"> <img src"#"> <p>test</p> <a href="#" class="special"></a> </div>

1つ：ホバーで、div全体をリンクにします（href = "＃"）。

これを行う方法が必要です！

4

1 に答える 1

0

リンクとコンテンツの両方を DIV 内にラップします。

<div class="wrapper">
  <a href="#"></a>
  <div class="one">
     <img src="#">
     <p>one</p>
  </div>
</div>

相対的なものにしてから、コンテンツ領域全体にまたがる透明なリンクを一番上に置きます。

.wrapper a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: transparent;
}

.wrapper a:hover{
  border: 1px solid #d33;  
}

.wrapper{
  position: relative;
  border: 1px solid #ccc;
}

ちょっと醜いですが、jsなしで他の選択肢は見当たりません:)

于 2013-01-22T22:30:11.023 に答える