CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
BTW8892
BTW8892

Reputation: 39

Create Simultaneous Hover Effects

I have done extensive research on how to accomplish this task, but I just can't seem to figure out the appropriate way.

At the moment, I currently have a table cell and I wanted to create two simultaneous hover effects when you scroll over the table cell. First, it will fill the entire table cell with a red background, and at the same time, it will also up the corresponding image opacity to 100%. The opacity sits at 25% when the image isn't be hovered.

For the most part, I have it all working, except for one minor issue. The image is just a small portion of the table cell, and I have to scroll over the image itself to enable to opacity change. If not, it will just fill the table cell background (an example is in the image below). I was wondering if it was possible to link the two hover effects together, so the background-color and image opacity change take place once the table cell is hovered over.

Example of the current hover effect

Here is my HTML code, as well as the CSS that goes along with it.

<td class="logo_area" align="center" style="background-color:#eeeeee;border-bottom: 1px solid #cccccc;">
    <a href="?mode=team&amp;team_id=' . $team_key . '"><img src="/images/logos/50/nhl/' . $team_key . '.png" alt="" border="0" style="opacity:0.25;filter:alpha(opacity=25); margin-top:7px;" /></a>
</td>

.logo_area  {
    height: 65px;
}

.logo_area a {
    display: block;
    height: 100%;
}

.logo_area a:hover {
    background-color: #c70000;
    display: block;
    width: 100%;
}

.logo_area a img:hover {
    opacity:1.0 !important;
    filter:alpha(opacity=100) !important;
}

This has been bugging me for several days, so I finally decided to reach out for some assistance. Any help would be greatly appreciated!

Upvotes: 0

Views: 118

Answers (2)

jonmrich
jonmrich

Reputation: 4323

How about with jQuery?

$( ".logo_area" ).hover(function() {
$( this ).css(
"opacity":"1.0",
"background-color:, "#c70000");    
});

Upvotes: 1

Andr&#233; Huf
Andr&#233; Huf

Reputation: 114

Change the order of your selector 

.logo_area a:hover img {
  opacity:1.0 !important;
  filter:alpha(opacity=100) !important;
}

Upvotes: 1

Related Questions