CODEWITHSUNDEEP
htmlcss
user3201945
user3201945

Reputation: 21

Change background-color for one cell when hovering over another (Only css)

I have tried to read up on this and have gooten it to work before but can't get the hover-effect on one cell to change the background-color of another cell. Any suggestions?

CSS

.frontpagetabellskraddarsy {
    background-color: #F8F8F8;
    border: 1px solid #DDDDDD;
    border-collapse: separate;
    border-radius: 4px;
    padding: 15px; }

.frontpagecelltextskraddarsy {
    background-color: #FFFFFF;
    padding-top: 5px;
    text-align: center;
}

.frontpagecellbildskraddarsy:hover .frontpagecelltextskraddarsy
{
    background-color: #289CDD;
    color: #FFFFFF;
}

HTML

<table class="frontpagetabellskraddarsy" style="background-color: #f8f8f8;" cellspacing="20">
    <tbody>
        <tr>
           <td style="text-align: center; background-color: #f8f8f8;" colspan="3" width="33%">[separator headline="h2" title="Skräddarsy din drömresa"]</td>
       </tr>
        <tr>
            <td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecellbildskraddarsy"><img alt="" src="http://media.baliexperten.se/2014/01/skraddarsypaket.png" class="frontpageresepaketbildskraddarsy"></td>
       </tr>
       <tr>
           <td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecelltextskraddarsy"><strong>SKRÄDDARSY DIN DRÖMRESA </strong>
Vi hjälper dig att skräddarsy just din drömresa till Bali
           </td>
    </tbody>
</table>

Upvotes: 2

Views: 3744

Answers (2)

Christoph
Christoph

Reputation: 51211

You cannot achieve this with arbitrary markup. You only option is to capture the hover on a tablerow tr and then animate either the adjacent row or one if it's cells via help of the adjacent sibling combinator:

tr:hover + tr td

Quick and messy example fiddle with your code example

Hovering over a cell and achieve an effect for a cell of another row is not possible with CSS3! Selectors Level 4 have a proposal to determine the Subject of a selector, where you get more flexibility (but I think this case still would not work).

<tr id="one">
   <td></td>   // #one td:hover
</tr>
<tr id="two">
   <td></td>   // #two td
</tr>

One thinks something like #one td:hover + #two td might work, however, the context of the last element in the first part of the selector is considered. Once you are on cell level #one td you cannot take a step backwards to select the sibling + #two.

#one:hover + #two td on the other hand works, because you capture the hover on #one, then traverse to the next row + #two and then finally "select" the child element td.

Upvotes: 0

Rahmani
Rahmani

Reputation: 877

<style type="text/css">
        #hoverDiv, #otherDiv {
            width: 200px;
            margin: 5px;
            float: left;
            height: 30px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        #hoverDiv:hover + #otherDiv {
            background: #9ce;
        }
    </style>

    <div id="hoverDiv">
        Hover me!
    </div>

    <div id="otherDiv">
        My color will change :)
    </div>

Upvotes: 1

Related Questions