Создание эффектов одновременного наведения

Question

Я провел обширные исследования о том, как выполнить эту задачу, но я просто не могу найти подходящий способ.

На данный момент у меня есть ячейка таблицы, и я хотел создать два эффекта одновременного наведения при прокрутке ячейки таблицы. Во-первых, он заполнит всю ячейку таблицы красным фоном, и в то же время он также увеличит непрозрачность изображения до 100%. Прозрачность находится на уровне 25%, когда изображение не будет вибрировать.

По большей части у меня все работает, за исключением одной незначительной проблемы. Изображение представляет собой лишь небольшую часть ячейки таблицы, и мне нужно прокрутить изображение, чтобы включить изменение непрозрачности. Если нет, он просто заполнит фон ячейки таблицы (пример приведен на рисунке ниже). Мне было интересно, можно ли связать два эффекта наведения вместе, так что изменение фонового цвета и прозрачности изображения происходит после того, как ячейка таблицы зависает.

Example of the current hover effect

Вот мой HTML-код, а также CSS, который идет вместе с ней.

<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; 
} 

Это было подслушивания меня в течение нескольких дней, так что я, наконец, решил выйти на какой-то помощи. Любая помощь будет принята с благодарностью!

Answer 1

Как с помощью jQuery?

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

Answer 2

Изменить порядок вашего выбора

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