How to have table cell's background change after a user hovers over link?

Question

<table bgcolor="#C08374" class="nav" align="center" width="1000" height="50">
    <tr>
        <td id="home" width="175" align="center">
            <a href="index.html">Home</a>
        </td>
    </tr>
</table>

By default, I want the table's background to be red, but after somebody hovers over the text, I'd like the cell's background to change to an image. I've got it working so far with the code below, but it only changes the background behind the text and not the whole cell. I'd like it to change the background for the whole cell.

.nav td a {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 18pt;
    text-decoration: none;
    color: black;
}

.nav td:hover a {
    color: gray;
    background-image: url('images/design/background250.png');
}

I would suggest for you to use div elements instead and for menu you should use
it is super easy to manipulate with CSS and effects work great. You can add :hover on li that you can set to represent the you have way more flexibility this way — I am Cavic, Dec 25 '13 at 05:17

Harry S · Accepted Answer · 2013-12-25T05:27:49.040

3

you can using jquery, http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/

This is the css

<style>
    .nav td a {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 18pt;
            text-decoration: none;
        color: black;
    }

    .nav td.link_hover {
            background-image: url('images/design/background250.png');
    }

    .nav td.link_hover a{
        color: gray;
    }
</style>

This is the jquery script

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            //hover
            $(".nav td a").bind("hover", function(){
                $(this).parent("td").addClass("link_hover");
            });

            //mouseout
            $(".nav td a").bind("mouseout", function(){
                $(this).parent("td").removeClass("link_hover");
            });
        });
    </script>

edited Dec 25 '13 at 05:27

answered Dec 25 '13 at 05:10

Harry S

256
2
4

The element still won't be block or inline-clock, so I don't believe this will work. – BillyJMcDonald Dec 25 '13 at 05:12
You don't need JS or or JQuery to create this. – BuddhistBeast Dec 25 '13 at 05:51
it's good, if you don't have to use jquery or js :) please make the demo in jsfiddle – Harry S Dec 25 '13 at 05:53
so you use padding for element a, is great, but it makes your padding-value depend on table-width. Overall it's a good solution – Harry S Dec 25 '13 at 06:12
I don't understand the use of JS when it's not needed... but if you must, consider caching the some selectors, like so ... tag = $(".nav td a");. Every time you select a tag you are diving into the DOM which cost performance. – BillyJMcDonald Dec 25 '13 at 06:28

score 0 · Answer 2 · answered Dec 25 '13 at 05:01

0

.nav td:hover {
    color: gray;
    background-image: url('images/design/background250.png');
    background-size: 100% 100%;
    background-position: center;
}

answered Dec 25 '13 at 05:01

CRABOLO

8,605
39
41
68

BillyJMcDonald · Answer 3 · 2013-12-25T05:10:46.190

0

You have to add display:block or display:inline-block as a tags are set to display:inline by default and inline elements can't have a width, height, margin or background-images...

.nav td:hover a {
    color: gray;
    background-image: url('../test.jpg');
    display:inline-block;
}

edited Dec 25 '13 at 05:10

answered Dec 25 '13 at 05:01

BillyJMcDonald

71
8

score 0 · Answer 4 · answered Dec 25 '13 at 05:31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<style type="text/css">
.nav td a {
    display:block;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 18pt;
    text-decoration: none;
    color: black;
    height:50px;
    line-height:50px;
}

.nav td:hover > a {
    color: gray;
    background-image: url('images/design/background250.png');
    background-position:left top;   
}
</style>
<body>

<table bgcolor="#C08374" class="nav" align="center" width="1000" height="50" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td id="home" width="175" align="center">
            <a href="index.html">Home</a>
        </td>
    </tr>
</table>

</body>
</html>

score 0 · Answer 5 · edited May 23 '17 at 12:07

So, I approached this a little bit differently. I used an unordered list as @LJ-C suggested. There a couple of things to take away from this.. but first, here is the example made with a JsFiddle.I would like to note that one does not need to use a div within every li, but it is also completely possible. I also structured this, so that you did not need any JS, if in some case you did not know how to utilize script knowledge. However, if you know JS, then it may be easier to utilize another person's suggestions mentioned here.

Now, to save a long discussion over why vs when, first know that everybody has their own opinions over the matter. This Stack Question is very insightful and full of information if you are looking to decide to use a table vs a list.

Next, if you would like me to break the code down in the JsFiddle so that you understand it a bit more, comment below and I have no problem doing so for you. With that being said, you are free to utilize this code so that you can take a basic understanding of how this trick fully works, I actually encourage you to play with it until you finally find the perfect CSS trick that really fits your website and what you want.

Finally, I want to help as much as possible. I can only type and try to explain matters so much but to better break certain things down, The CSS Almanac is a great tool to utilize, it shows examples and even gives basic documentation, I still learn a lot from it! A few other great tools range from MDN all the way to W3 but like I said, everybody has their own preferences as to what they want to use or how they like to do things.

Just as a recap, I have restructured your code from :

<table bgcolor="#C08374" class="nav" align="center" width="1000" height="50">
    <tr>
        <td id="home" width="175" align="center">
            <a href="index.html">Home</a>
        </td>
    </tr>
</table>

to look more like:

<div id='menubar'>
    <div id='menu'>
        <ul id='a_links'>
            <li><a href="index.html">Main Page</a></li>
        </ul>
    </div>
</div>

So even if you don't decide to go towards using my CSS, you can always you the outline of my HTML to create a navigation bar, whether you take out the divs and use just the ul & lis, is completely up to you. One last thing that will be of use is knowing how to display something like a "table" and here is the link to do so.

As an ending note; be creative, you can do this :) Good luck in your endeavors!

How to have table cell's background change after a user hovers over link?

5 Answers5