CSS将鼠标悬停在框上以更改颜色和链接

时间:2012-12-02 21:13:08

标签: html css hover

嘿伙计们玩CSS。我做了一个盒子。基本上我想弄清楚的是,当人们盘旋在盒子上时,它会改变颜色,然后将它们链接到新选项卡中的另一页面。谁能帮我?

到目前为止

代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>

<style>
    .border
    {
        height: 150px; 
        width:  150px; 
        border: 1px solid black;  
        text-align:center; 
    }

</style>


</head>
<body>

<div class="border">
    <a href="http://www.1.com/"></a> 
</div>

</body>
</html>

3 个答案:

答案 0 :(得分:3)

对于颜色更改部分,请使用CSS :hover伪类

.border:hover{
   background: green;
}

链接打开部分使用链接标记

中的target="_blank"
<a href="http://www.1.com/" target="_blank"></a> 

这将根据用户的浏览器设置(您无法影响)打开新标签页或窗口中的链接

答案 1 :(得分:1)

无法强制在特定或新标签中打开链接。只能在同一窗口,同一帧,自定义框架,新框架或新窗口中打开链接。

答案 2 :(得分:1)

您可以将此悬停代码添加到样式

.border:hover
{
    background-color: red;
}

并且还包围div的链接并使用target =“_ blank”

<a href="http://www.1.com/" target="_blank">
<div class="border">

</div>
</a>