html - ホバーでdivボックスを強調表示します

Question

次の属性を持つdivがあるとします。

.box {
  width: 300px;
  height: 67px;
  margin-bottom: 15px;
}

誰かがこの領域にマウスを合わせると、背景が少し暗い色に変わり、クリック可能な領域になるようにするにはどうすればよいですか？

Answer 1

CSSのみ：

.box:hover{
background: blue; /* make this whatever you want */
}

これを「クリック可能」領域にするには<a></a>、div内にタグを配置し、jQueryを使用してhref属性を設定することをお勧めします。

jQueryソリューション

$('.box').hover(function(){
$(this).css("background", "blue");
$(this).find("a").attr("href", "www.google.com");
});

3番目の解決策： カーソルを変更し、jQueryを使用してクリックイベントを与えることもできます。

$('.box').click(function(){
// do stuff
});

上記を次のCSSと一緒に使用します。

.box{
background: blue;
cursor: pointer;
}

Answer 2

.box:hover {
    background: #999;
    cursor: pointer;
}

ホバーすると、背景が希望の色に変わり、カーソルがポインターになります。次のように、jQueryを使用してイベントをトリガーできます。

$('.box').click(customFunction);

Answer 3

divをリンクすることは、タグでラップするだけでうまくいきました。以下に、Bootstrapクラスを使用した例を示します。

<a href="#">
<div class="col-md-4">

<span class="glyphicon glyphicon-send headericon"></span>

<p class="headerlabel">SEND</p>
<p class="headerdescription">Send candidate survey</p>    

</div> 
</a>

ホバー時にdivの色を変更するには、次を追加します。

div:hover {
background-color: rgba(255,255,255,0.5);
}

あなたのCSSに:)

Answer 4

CSSでのみ実行できます。

.box:hover{
  background: blue;
  cursor: pointer;
}

またはJavascriptを使用します（この例ではjQueryを使用しています）

;(function($){
  $('.box').bind('hover', function(e) {
    $(this).css('background', 'blue');
  });
})(jQuery);