I want to put links in different divs, but the link can only be clicked inside the div. I don't want the link to be visible when hovering over the sides of the div like in this example:
<style>
.caja {
border: 1px solid black;
display: flex;
justify-content: center;
width: 50%;
}
.caja .panel {
border: 1px solid green;
width: 40%;
margin: 10px;
}
.panel div {
margin: 0 auto;
display: flex;
justify-content: center;
margin-bottom: 10px;
margin-top: 10px;
border: 1px solid grey;
padding: 5px;
width: 50%;
}
</style>
<div class="caja">
<div class="panel">
<a href="">
<div>Opción 1</div>
</a>
<a href="">
<div>Opción 2</div>
</a>
</div>
</div>
Hovering outside the Option 1 div or the Option 2 div the link is still visible and I don't want it to be like that
How can I fix it?
Thank you
Here I leave you, remove the div, it is not necessary. Use the tag
<a>
giving it the same format that you assigned to the<div>
.From what I understood you only want the link to be displayed if the mouse is hovered over the div. Try this, I did it only with the first link