錨標記鏈接應該只在紅色邊界區域內可用

我想清理我的錨點的工作方式，我希望錨標記鏈接應該只在紅色邊框區域內可用。換句話說，錨點標記鏈接應該在div上可用，其中應用了.categoryArea類，並且鼠標指針應該在所述區域外部正常。錨標記鏈接應該只在紅色邊界區域內可用

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     <meta charset="utf-8" /> 
<style type="text/css"> 

body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
    color: #666; 
} 

.content { 
    width: 100%; 
    max-width: 640px; 
    border: 1px solid #eee; 
    margin: 0 auto; 
} 


.categoryArea { 
    width: 100px; 
    height: 130px; 
    margin: 4px auto 4px auto; 
    background-color: white; 
    border: 2px solid red; 
    padding: 4px; 

} 

.categoryArea:hover { 
    box-shadow: 0px 0px 5px #888888; 
} 


.categoryIcon { 
    width: 100px; 
    height: 88px; 
    background-color: gold; 
    margin: 0 auto; 
} 


.categoryName { 
    text-align: center; 
    font-size: 0.8em; 
    line-height: 1.2em; 
    height: 2.4em; 
    color: #2f2f2f; 
    margin: 2px 0px 0px 0px; 
    overflow: hidden; 
} 

.category-selector { 
    display: table; 
    width: 100%; 
    background-color: cyan; 
    margin: 0 auto; 

} 

.category-selector a { 
    text-decoration: none; 
    color: inherit; 
} 

ul { 
    list-style:none; 
    margin: 0px; 
    padding: 0px; 
} 

.category { 
    display: block; 
    float: left; 
    width: 50%; 
    min-width: 125px; 
    margin: 0 auto; 
    background-color: beige; 
} 



</style> 
</head> 
    <body> 

    <div class="content"> 
     <h3>Some text here..</h3> 

     <nav class="category-selector"> 
     <ul> 
      <li class="category"> 
       <a href="/aaaaaa"> 
        <div class="categoryArea"> 
         <div class="categoryIcon"> 
          Icon 
         </div> 
         <p class=categoryName>aaaaaa</p> 
        </div> 
       </a> 
      </li> 


      <li class="category"> 
       <a href="/bbbbbb"> 
        <div class="categoryArea"> 
         <div class="categoryIcon"> 
          Icon 
         </div> 
         <p class=categoryName>bbbbbb</p> 
        </div> 
       </a> 


      </li> 

      <li class="category"> 
       <a href="/cccccc"> 
        <div class="categoryArea"> 
         <div class="categoryIcon"> 
          Icon 
         </div> 
         <p class=categoryName>cccccc</p> 
        </div> 
       </a> 
      </li>     


      <li class="category"> 
       <a href="/dddddd"> 
        <div class="categoryArea"> 
         <div class="categoryIcon"> 
          Icon 
         </div> 
         <p class=categoryName>dddddd</p> 
        </div> 
       </a> 
      </li>     

      <li class="category"> 
       <a href="/eeeeee"> 
        <div class="categoryArea"> 
         <div class="categoryIcon"> 
          Icon 
         </div> 
         <p class=categoryName>eeeeee</p> 
        </div> 
       </a> 
      </li>     

      <li class="category"> 
       <a href="/ffffff"> 
        <div class="categoryArea"> 
         <div class="categoryIcon"> 
          Icon 
         </div> 
         <p class=categoryName>ffffff</p> 
        </div> 
       </a> 
      </li>     

     </ul> 
     </nav> 

    </div> 

    </body> 
</html>

https://jsfiddle.net/uvsrtpfu/

來源

2015-10-17 Syed

請提供jsfiddle。 – Alex

https://jsfiddle.net/uvsrtpfu/ – Syed

不清楚你在問什麼 –

刪除了類形式的div內部<a>標記，並將其加入到<a>標籤，並將其設置到框。

https://jsfiddle.net/uvsrtpfu/2/

來源

2015-12-05 07:03:06 Syed

您應該使用錨標記上的DIV中。這工作：

<li class="category"> 
 

 
    <div class="categoryArea"> 
 

 
    <a href="/aaaaaa"> 
 
     <div class="categoryIcon"> 
 
     Icon 
 
     </div> 
 
     <p class=categoryName>aaaaaa</p> 
 

 
    </a> 
 
    </div> 
 
    
 
</li>

來源

2015-10-17 06:56:02 ASK

你必須給顯示器display:inline-block;到a元素，然後給text-align:center;到.category。

來源

2015-10-17 07:00:39 Alex

錨標記鏈接應該只在紅色邊界區域內可用

回答

相關問題