Q:

anchor tag link should be available only inside red bordered area

I am trying to clean up the way my anchors work, I want anchor tag link should be available only inside the red bordered area.
In other words the anchor tag link should be available on div where  .categoryArea class is applied, and mouse pointer should be normal outside of the said area.
<!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/

A:

Removed the class form div inside <a> tag and added it to <a> tag and set it to block.
https://jsfiddle.net/uvsrtpfu/2/

