Question

我有这个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>

http://jsfiddle.net/PspXV/

现在，为什么“视图配置文件”在被徘徊时被加下划线？为什么？！他们在文件中的订单是我必须遵循的吗？

Answer 1

.mini-profile a:hover {
    color:#08C;
    text-decoration:underline;

这就是为什么

你的div类是class="bs-docs-sidebar bs-docs-sidenav rounded-div-white mini-profile"

具体mini-profile

Answer 2

您在小提琴中定义了此规则，但未在您为问题提供的CSS中定义：

.mini-profile a:hover {
    ...
    text-decoration: underline;
}

将text-decoration: underline;更改为text-decoration: none;以删除下划线。

Answer 3

您的元数据不在标记内，但您正在将鼠标悬停在标记上。

   <small class="metadata"><a href="#">View my profile page</a></small>

http://jsfiddle.net/calder12/PspXV/4/

Answer 4

            <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'）。

CSS文件中是否有订单？为什么要加下划线（a href）

4 个答案: