我有这个CSS代码:
.mini-profile {
padding: 12px;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-profile a {
color: #333333;
}
.mini-profile a:hover {
color:#08C;
}
.metadata{
color: #999;
text-decoration:none;
}
.metadata:hover{
color: #999;
text-decoration:none;
}
.metadata a{
color: #999;
text-decoration:none;
}
.metadata a:hover {
color: #333333;
text-decoration:none;
}
现在我有了这个:
<div class="bs-docs-sidebar bs-docs-sidenav rounded-div-white mini-profile">
<a href="www.google.com">
<div class="content">
<div style="margin-left:50px;"><b style="display:block;">Antoine</b>
<small class="metadata">View my profile page</small>
</div>
</div>
</a>
</div>
现在,为什么“视图配置文件”在被徘徊时被加下划线?为什么?!他们在文件中的订单是我必须遵循的吗?
答案 0 :(得分:2)
.mini-profile a:hover {
color:#08C;
text-decoration:underline;
你的div类是class="bs-docs-sidebar bs-docs-sidenav rounded-div-white mini-profile"
具体mini-profile
答案 1 :(得分:2)
您在小提琴中定义了此规则,但未在您为问题提供的CSS中定义:
.mini-profile a:hover {
...
text-decoration: underline;
}
将text-decoration: underline;
更改为text-decoration: none;
以删除下划线。
答案 2 :(得分:0)
您的元数据不在标记内,但您正在将鼠标悬停在标记上。
<small class="metadata"><a href="#">View my profile page</a></small>
答案 3 :(得分:0)
<a href="www.google.com">
<div class="content">
<div style="margin-left:50px;"><b style="display:block;">Antoine</b>
<small class="metadata">View my profile page</small></div>
</div>
</a>
这严重违反了网络标准。这会将浏览器发送到怪异模式,并可能导致渲染问题。永远不要将块级元素放在内联元素中('a'中的'div')。