悬停时高亮显示div框 [英] Highlight div box on hover

问题描述

说我有一个具有以下属性的div:

Say I have a div with the following attributes:

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

我如何做到这一点，如果有人将鼠标悬停在该区域上，它将背景更改为略深的颜色并使之成为可单击的区域?

How would I make it so that if someone hovers their mouse over this area, it changes the background to a slightly darker colour and makes it a clickable area?

推荐答案

仅CSS:

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

要使其成为可点击的"区域，您将要在div内放置< a></a> 标记，并且您可能想使用jQuery来设置 href 属性.

To make it a 'clickable' area, you're going to want to put a <a></a> tag inside the div, and you may want to use jQuery to set the href attribute.

jQuery解决方案

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

第三种解决方案:您可以更改光标，也可以使用jQuery为其提供click事件:

A third solution: You could change the cursor, and also give it a click event using jQuery:

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

将以上内容与以下CSS结合使用:

Use the above along with the following CSS:

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

这篇关于悬停时高亮显示div框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！