Question

嘿伙计们玩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>

Answer 1

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

.border:hover{
   background: green;
}

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

中的target="_blank"

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

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

Answer 2

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

Answer 3

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

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

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

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

</div>
</a>

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

3 个答案: