Question

我正在尝试清理我的锚点的工作方式，我希望锚标记链接应该只在红色边界区域内可用。换句话说，锚标签链接应该在应用.categoryArea类的div上可用，并且鼠标指针在该区域之外应该是正常的。

<!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/

Answer 1

删除了<a>标记内的类形式div，并将其添加到<a>标记并将其设置为阻止。

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

Answer 2

您应该在div中使用锚标记。这有效：

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

Answer 3

您必须向display:inline-block;元素显示a，然后将text-align:center;提供给.category。

Jsfiddle

锚标记链接应仅在红色边界区域内可用

3 个答案: