I’m trying to figure out how to properly group a bunch of <span> elements inside a link.
I have a link with a bunch of spans inside of it, but when I force a hover over the link, this happens
ok, I’m trying to apply a bunch of CSS rules to the link, but when I do, it seems to ignore the <span>s, I think its beause of the positioning, but I’m not sure if I set it up right
From what I can see from the code above your spans are being absolutely spaced but you don’t show any dimensions for the anchor element therefore the percentages have nothing on which to base themselves.
The anchor needs a width and height for the percentage on the spans to take effect.
Sorry (not too good at explaining)
What im trying to do is create a hover effect on certain rooms in the floorplan.
Some of the rooms are odly shaped so I nest spans inside the link, like
<a href="">
<span></span>
<span></span>
</a>
Im trying to make it so that when I add the styles
a:hover {
background-color:red;
border:black;
}
so that when the mouse hovers the link, the a and its nested spans are highlighted. I dont think absolutelly positioning the spans works though,
Can anchor tags take a background-color property? They’re not… really… containers…(I’m stating that badly. They’re not generally space-consuming block elements themselves. Usually you’d wrap an anchor tag around something else, like a div, to make the div a link.)
Anchors are inline by default so they would normally only give a background to the text inside of the anchor. It will render the background. An easy solution around that is inline-block though. Tons of ways to make an anchor a “space-consuming block”, so to speak .
Yes correct and as Ryan said by default anchors are inline elements and even when you nest a div inside you may find the background still doesn’t cover the element inside unless you set the anchor to display:block.
However absolutely positioned elements are automatically given a display of block even if they are inline elements and will contain in flow children. Of course absolutely placed children are again removed from the flow and the anchor will be empty if all it contains are absolutely placed elements and is not sized in any way.
I’ve thrown the above code into a codepen and it all seems to work as expected from the code on offer.