HTML hover oon text-CodePudding

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?