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

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

html css

Html 锚定标记链接应仅在红色边界区域内可用,html,css,Html,Css,我试图清理我的锚工作方式，我想锚标签链接应该只在红色边界区域内可用。换句话说，锚定标记链接应该在应用.categoryArea类的div上可用，并且鼠标指针应该在所述区域之外正常 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="

我试图清理我的锚工作方式，我想锚标签链接应该只在红色边界区域内可用。换句话说，锚定标记链接应该在应用.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>


身体{
保证金：0；
填充：0；
字体系列：Arial，无衬线；
颜色：#666；
}
.内容{
宽度：100%；
最大宽度：640px；
边框：1px实心#eee；
保证金：0自动；
}
分类属{
宽度：100px；
高度：130像素；
保证金：4px自动4px自动；
背景色：白色；
边框：2倍纯红；
填充：4px；
}
.categoryArea:悬停{
盒影：0px 0px 5px#8888888；
}
.分类号{
宽度：100px；
高度：88px；
背景颜色：金色；
保证金：0自动；
}
.类别名称{
文本对齐：居中；
字号：0.8em；
线高：1.2米；
高度：2.4em；
颜色：#2f；
保证金：2px0px 0px 0px；
溢出：隐藏；
}
.类别选择器{
显示：表格；
宽度：100%；
背景色：青色；
保证金：0自动；
}
.类别选择器a{
文字装饰：无；
颜色：继承；
}
保险商实验室{
列表样式：无；
边际：0px；
填充：0px；
}
.类别{
显示：块；
浮动：左；
宽度：50%；
最小宽度：125px；
保证金：0自动；
背景颜色：米色；
}
这里有一些文字。。

您应该在div内使用锚定标记。这起作用：

您必须给出display

display:inline块到a
元素，然后给出文本对齐：居中
到类别

删除了
中的类表单div。请提供jsfiddle。不清楚您这样问什么？只需删除a
标记中的类表单div
，并将其添加到a
标记中，然后将其设置为block