Question

我正在尝试更改已建立链接的矩形形状的悬停颜色。

html是

<a href='page1.html'>
<div class="tri">
&nbsp;

</div>
</a>

和css是

.tri {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}

我认为这是我需要输入的代码

a.tri:hover { background-color: yellow;}

但它不起作用请帮忙！

Answer 1

尝试使用如下： Demo

<强> CSS：

.tri a {
    width:100px;
    height:200px;
    background: #b51e4c;
    position:absolute;
    top:100px;
    left:100px;
}
.tri a:hover {
    background-color: yellow;
}

<强> HTML：

<div class="tri"> <a href='page1.html'>&nbsp;</a></div>

在<div>内使用<a>并不是一种好习惯。所以互换了html和CSS中的位置

Answer 2

您必须添加空格a[here].tri:hover { background-color: yellow;}

＆＃13;

.tri {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}
a .tri:hover { background-color: yellow;}

＆＃13;

<a href='page1.html'>
<div class="tri">
&nbsp;

</div>
</a>

＆＃13;

Answer 3

您的代码应该可以正常运行。尝试将该类直接添加到<a>标记。以下是代码库演示您的代码：

http://codepen.io/anon/pen/NPVeoP

将鼠标悬停在链接颜色不起作用的html css上

3 个答案: