我知道这有点奇怪,但如果我的页面上有嵌入/iframe 代码,则在 Chrome 中悬停无法正常工作。
问题是当我将鼠标悬停在顶部的两个框 (li) 上时,它们会有一个幽灵悬停(意思是,即使我的鼠标不再悬停也有悬停效果)。仅当页面上有 iframe 时才会发生这种情况。我尝试删除 iframe(用于 YouTube 嵌入代码)并且问题消失了。
有什么联系吗?这是我的悬停代码:
CSS:
.boxes > li {
background: none repeat scroll 0 0 transparent;
border-image: none;
border-style: none none dashed;
border-width: medium medium 1px;
box-shadow: none;
display: block;
}
.boxes > li:hover {
background-color: #E0EDFF;
border-color: #E0EDFF;
box-shadow: 2px 2px 4px #BBB;
}
HTML:
<ul class="boxes">
<li>
<div class="detail">
<h4>Some Title</h4>
<div><p>Some paragraph. <a href="#">Read More »</a></p></div>
</div>
</li>
</ul>