Двойной эффект зависания для вложенных элементов списка в CSS

Question

Я пытаюсь получить различные эффекты зависания для элементов списка.

Мой список - это изображение и название (оба вытягиваются из Wordpress). Я хочу, чтобы в поле фона для названия был изменен цвет при наведении (родительский Li) и эффект, применяемый к изображению (я использовал непрозрачность в пример js скрипка).

Вот jsfiddle

<li id="item" class="item"> 
     <a href="#"><img src="http://placekitten.com/g/200/300"/></a> 
      <br /> 
     <a href="#" class="p_title">Entry 6</a> 
</li> 

Ситуация 1: Наведите курсор на изображение, все работает, как хотелось бы его тоже.

Ситуация 2: Наведите указатель мыши на черный ящик, и вы получите другой эффект.

Я бы хотел, чтобы ситуация 2 результат = Ситуация 1 результат.

Я посмотрел следующее на переполнение стека, но не повезло. link 1 link 2 link 3 link 4

Пожалуйста, помогите! Я думал, что это моя разметка, но я несколько раз менял ее, и это не исправить.

Любые указатели в правильном направлении будут оценены. Я был настроен только на CSS, но если скрипт java исправляет его, то это тоже здорово.

Благодаря

Fabs

Answer 1

Вы хотите объявить: наведите курсор мыши на литий, а затем выберите IMG или название после этого. Кроме того, ваша разметка может быть немного лучше. Например:

<li class="item"> 
    <a href="#"> 
    <img src="http://placekitten.com/g/200/300" /> 
    <br /> 
    <span class="p_title">Entry 6</span> 
    </a> 
</li> 

li.item:hover img { 
    opacity: 1; } 

li.item:hover { 
    background-color: #fb8008; }