将鼠标悬停在链接颜色无效的html css上

我试图改变一个矩形形状的悬停颜色，我做了一个链接

html是

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

</div>
</a>

我想这就是我需要输入的代码

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

但它不起作用

---

请帮忙

您必须添加空格

a[此处].tri:hover{background color:yellow；}

.tri{
宽度：100px；
高度：200px；
背景：#b51e4c；
位置：绝对位置；
顶部：100px；
左：100px；
}
a.tri:hover{背景色：黄色；}

---

您的代码应该工作正常。尝试将类直接添加到

中，尝试这样使用：

CSS:

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

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

HTML:

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

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



在
内部使用
不是一个好的做法。因此，在html和CSS中交换了两者的位置