As a beginner in css, html, and js, I created an html page with a table of athletes. Each row is identified by the css class "athlete-name", like this:
<div id="message-hide" style="display: none"> Hello world! </div>
<td class="athlete-name" style="padding-right: .75rem !important;">
ElMaestroDeToMare
</td>
I wanted to display a cartoon with some text when hovering over this element. I tried using the hover class, but it didn't work as expected.
Here is my css code:
.athlete-name {
@include set_font($smallfontsize);
font-weight: $bold;
color: $font_color;
}
.athlete-name:hover + .message-hide {
display: block;
color: black;
}