Question

我怎样才能让例二如第一例那样工作。每当我添加一个href标签时，它就会完全破坏我的css悬停规则，将颜色变为红色。帮助

<!-- EXAMPLE ONE -->
<a href="#"><div class="nav-portfolio">
    <div class="navstyle">portfolio</div>
            <div id="project-numbox">1</div>
             <div id="project-numbox">2</div>
             <div id="project-numbox">3</div>
</div></a>

<!-- EXAMPLE TWO -->
<div class="navigation-container">
<a href="#"><div class="nav-portfolio">
    <div class="navstyle">portfolio</div>
    <a id="test" href="#"><div id="project-numbox">1</div></a>
<a href="#"><div id="project-numbox">2</div></a>
<a href="#"><div id="project-numbox">3</div></a>
</div></a>
</div>

编辑：jsfiddle链接中的css

jsfiddle链接：http://jsfiddle.net/jZWF7/1/

Answer 1

添加CSS：

.navigation-container a {
    color: inherit;
}

覆盖默认的锚点样式。

DEMO

Answer 2

添加此CSS：

.nav-portfolio:hover a {
  color: red;
}

http://jsfiddle.net/jZWF7/7/

Answer 3

在第二个示例中，您嵌套了<a>个标记。在关闭之前打开<a>标记后跟另一个<a>会自动关闭它。所以第二个例子实际上是这样的：

<div class="navigation-container">
    <a href="#"></a>
    <div class="nav-portfolio">
        <a href="#"><div class="navstyle">portfolio</div></a>
        <a id="test" href="#"><div id="project-numbox">1</div></a>
        <a href="#"><div id="project-numbox">2</div></a>
        <a href="#"><div id="project-numbox">3</div></a>
    </div>
</div>

删除第一个<a>将解决您的问题。

href属性与我的css悬停规则冲突

3 个答案: