My communication skills are lacking, so I have included an image to better illustrate my issue.
Here is the problem
.body {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
cursor: default;
}
.column1 {
display: flex;
flex-direction: column;
}
.boxhunter {
display: flex;
padding: 5px;
flex-direction: column;
align-items: center;
width: 180px;
background-image: radial-gradient(circle at center center, #ABD473 0%, #16150c 120%);
border: 2px solid black;
border-radius: 3%;
margin: 10px;
}
a {
color: black;
font-family: Dwarvesc;
border: 1px dotted red;
padding: 5px;
}<div class="body">
<div class="flex-container">
<div class="column1">
<a href="./classes/druid/druidindex.html">
<div class="boxdruid"><img class="profsimage" src="./randomimages/driud.png">Druid</div>
</a>
<a href="#hunter">
<div class="boxhunter"><img class="profsimage" src="./randomimages/hunter.png">Hunter</div>
</a>
<a href="#mage">
<div class="boxmage"><img class="profsimage" src="./randomimages/mage.png">Mage</div>
</a>
<a href="#paladin">
<div class="boxpaladin"><img class="profsimage" src="./randomimages/paladin.png">Paladin</div>
</a>
</div>
<div class="column1">
<a href="#priest">
<div class="boxpriest"><img class="profsimage" src="./randomimages/priest.png">Priest</div>
</a>
<a href="#rogue">
<div class="boxrogue"><img class="profsimage" src="./randomimages/rogue.png">Rogue</div>
</a>
<a href="#warlock">
<div class="boxwarlock"><img class="profsimage" src="./randomimages/warlock.png">Warlock</div>
</a>
<a href="#warrior">
<div class="boxwarrior"><img class="profsimage" src="./randomimages/warrior.png">Warrior</div>
</a>
</div>
</div>
</div>In the provided CSS code, the dotted red lines indicate the box wrapped by the A link. I would like the entire box to be clickable while maintaining a default cursor position between each box. Is there a way to change the A link to target only the div box? Thank you for your assistance.