Псевдокласс :hover одновременно для двух элементов!

[volshebnyi]

Здравствуйте!

Имеется список ссылок:

HTML

<ul class="roomList">
    <li>
	 <img src="img/tykvaMini.png" alt="">
	 <a href="#">Тыквенная</a>
    </li>
    <li>
	 <img src="img/tykvaMini.png" alt="">
	 <a href="#">Тыквенная</a>
    </li>
    <li>
	 <img src="img/tykvaMini.png" alt="">
	 <a href="#">Тыквенная</a>
    </li>
    <li>
	 <img src="img/tykvaMini.png" alt="">
	 <a href="#">Тыквенная</a>
    </li>
    <li>
	 <img src="img/tykvaMini.png" alt="">
	 <a href="#">Тыквенная</a>
    </li>
   </ul>

CSS

.roomList{
float: left;
width: 300px;
margin-right: 10px;
padding-left: 10px
}
.roomList li{
margin-bottom: 15px;
padding-left: 70px;
}
.roomList li img{
float: left;
width: 28px;
height: 25px;
padding: 5px;
border-radius: 100px;
}
.roomList li img:hover{
cursor: pointer;
webkit-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5);
}
.roomMini{
display: block;
height: 25px;
padding-left: 48px;
padding-top: 10px;
font-family: Ava, Tahoma, Verdana;
font-size: 15px;
}
.roomMini:hover{
text-decoration: underline;
}

Необходимо сделать так, что бы псевдокласс :hover срабатывал одновременно и для изображения (появлялась тень) и для текста ссылки (подчеркивание). Отдельно у меня это, естественно получается, а вот одновременно - никак.

На изображении то, что должно получиться:

Заранее благодарю за помощь и конструктивные советы!

[klierik]

.roomList > li:hover img { ... }

.roomList > li:hover a { ... }

[volshebnyi]

.roomList > li:hover img { ... }

.roomList > li:hover a { ... }

Спасибо Вам огромное!

[volshebnyi]

А еще вот такой вопрос у меня. Есть вот слайдер афиш:

<ul class="carousel">
     <li>
        <a href="#"><img src="img/pic02.jpg" alt=""></a>
        <p>Текст афиши</p>
     </li>
</ul>

CSS:

.carousel img{
width: 160px;
height: 220px;
margin-bottom: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
box-shadow: 0px 1px 2px 0px #b7b7b7;
}
.carousel ul li {
background: none;
background-color: #FFF;
padding: 1px;
width: 160px;
}

Как добиться результата с такими углами над картинками, как на скриншоте? Очень много перелистал материалов по этому поводу, но так, к сожалению, и не смог решить проблему.

Спасибо!

[Galaxy]

ну думать надо в сторону :before :after, z-index, гемотерические фигуры на css + тени,позиционирование.Сложного в прицнипе ничего нету

[volshebnyi]

ну думать надо в сторону :before :after, z-index, гемотерические фигуры на css + тени,позиционирование.Сложного в прицнипе ничего нету

Я уже перечитывал по поводу геометрических фигур на чистом CSS. Но ничего не выходит...

[klierik]

http://jsfiddle.net/klierik/JKxeB/

[Galaxy]

http://jsfiddle.net/JKxeB/5/ чуток переделал.

[Artwan]

Еще один способ. Более приближенный к ТЗ. Добавить свойство transform: rotate(135deg); Наглядно - вот.

Итого http://jsfiddle.net/JKxeB/7/ А дальше просто добавить тени, поменять цвет...

Edited September 30, 2013 by Artwan

[volshebnyi]

Не получается применить стиль transform: rotate. А по методу, который указал Galaxy - при добавлении теней прорисовуются очертания квадрата...

[SelenIT]

Всё получается, вроде (чуть доработанный пример Artwanа).

[volshebnyi]

Всё получается, вроде (чуть доработанный пример Artwanа).

Всем огромное спасибо за помощь! Получилось!