Home > front end >  HTML hover oon text
HTML hover oon text

Time:05-05

I have a table where I have a text. I have made the following code so that when you hover over it, a small text appears. = "<a title = " " " Hello " " \ "href = " # \ "style = " text-decoration: none; color: white; \ ">" "Hover on me" ""

What I want is to be able to hover over the entire column and then comes the text. (preferably even bigger if possible)

Anyone have an idea?

CodePudding user response:

Try this!

.hoverText{
    display: block;
    width: 100%;
    height: 100%;
    background-color: aqua;
}
<table style="width:100%; height: 200px;">
    <tr>
        <td>
            <a title="Hover Text 1" href="#" >Hover on me 1</a>
        </td>
        <td>
            <a title="Hover Text 2" href="#" >Hover on me 2</a>
        </td>
    </tr>
    <tr>
        <td>
            <a title="Hover Text 3" href="#" >Hover on me 3</a>
        </td>
        <td>
            <a title="Hover Text 4" href="#" >Hover on me 4</a>
        </td>
    </tr>
</table>

Thanks and best regards!

CodePudding user response:

Hmm.. I kind of get the same result as before.. It is still only when i hover on the text. enter image description here

.hoverText{
    display: block;
    width: 100%;
    height: 100%;
    background-color: aqua;
}
<table style="width:100%; height: 200px;">
    <tr>
        <td>
            <a title="Hover Text 1" href="#" >Hover on me 1</a>
        </td>
        <td>
            <a title="Hover Text 2" href="#" >Hover on me 2</a>
        </td>
    </tr>
    <tr>
        <td>
            <a title="Hover Text 3" href="#" >Hover on me 3</a>
        </td>
        <td>
            <a title="Hover Text 4" href="#" >Hover on me 4</a>
        </td>
    </tr>
</table>

CodePudding user response:

If you want to have a hover effect on the cell, you must apply it the whole cell, and not only to the text. So, add it in the td- Tag, not to the text.

Or did I understand your question wrong?

  • Related