HTML标题属性使CSS悬停不起作用

Question

我有一些代码可以制作箭头，并尝试向其添加title属性。这是箭头代码：

#arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
}

#arrow-right:hover {
  border-left: 10px solid gray;
}

<div id="arrow-right" title="text here"></div>

在添加'title'属性之前，它工作正常，将鼠标悬停时颜色更改为灰色，但是在添加'title'属性后，css颜色更改停止工作，但标题开始工作。有什么办法可以同时完成这两项工作？

Answer 1

替换

<div id="arrow-right" ; title="text here"></div>

with

<div id="arrow-right" title="text here"></div>

Answer 2

我发现了问题。我有在元素中声明的样式，例如：

<div id="arrow-right" title="text here" style="border-right: 10px solid white;"></div>

伴随着样式表中声明的样式，这破坏了它。我只需要删除thr div中声明的样式并对其进行修复即可。