href屬性與我的css懸停規則衝突

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> 

編輯：CSS中的jsfiddle鏈接

的jsfiddle鏈接：http://jsfiddle.net/jZWF7/1/

Answer 1

添加CSS：

.navigation-container a { 
    color: inherit; 
} 

覆蓋錨的默認樣式。

​​

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>將解決您的問題。