Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как одновременно подсветить картинку с находящимся ниже текстом

Как одновременно подсветить картинку с находящимся ниже текстом


     03.02.2012    верстка, css    Все вопросы » Стили (CSS)    4494

вопрос
Нужно подсветить картинку вместе с текстом одновременно. Моих сил в css хватило на подсветку только по отдельности.




Как это выглядит:
Как одновременно подсветить картинку с находящимся ниже текстом


Как должно быть:
Как одновременно подсветить картинку с находящимся ниже текстом

Т.е. нужно чтобы при наведении либо на текст, либо на эту рамку (в рамке будет картинка) они вместе подсвечивались

Ответил: ПафНутиЙ


Псевдоэлемент :hover ожно применять не только к ссылкам. Поэтому заключаем картику и заголовок в див а при нведении на него будем делать подсветку обоих элементов.


<div class="class">
[full-link][xfgiven_image]<img src="[xfvalue_image]" alt="{title}" />[/xfgiven_image][/full-link]
<h2>[full-link]{title}[/full-link]</h2>
</div>



.class a {display: block;}
.class h2 a {display: inline;}
.class:hover a {
border: 1px solid #dcdcdc;  
color: #fff;
}
.class:hover h2 a {
border: none;
color: #474646;
}


Как то так? нужно только дописать нужные стили для конечного оформления.

11 комментариев

hosts
Юзер

hosts - 3 февраля 2012 23:51 -

да. большое спасибо)

hosts
Юзер

hosts - 4 февраля 2012 01:38 -

а можно как то переделать, чтобы всё подсвечивалось, если только навести на картинку, а если на текст, то только текст !?

ПафНутиЙ
Админ

ПафНутиЙ - 4 февраля 2012 02:32 -

.class a img:hover + h2 {color: #f00;} 

попробуй так, должно при наведении на картинку подсвечивать h2

Каков вопрос - таков и ответ. Просто помните об этом.

hosts
Юзер

hosts - 4 февраля 2012 02:50 -

если честно, запутался...

вставил в конец твой стиль, изменив только название класса, но на сайте ничего не изменилось.

ПафНутиЙ
Админ

ПафНутиЙ - 4 февраля 2012 03:11 -

Зачем заключать картинку в див?
да и вообще как то всё неправильно. Заче ссылка у картинки и у заголовка? нужно убрать одну из ссылок и если хочешь чтоб блок кликабельный был и дописать js
$(function () {
    $(".class")
    .click(function(){window.location=$(this).find("a").attr("href"); return false;});
});

Каков вопрос - таков и ответ. Просто помните об этом.

hosts
Юзер

hosts - 4 февраля 2012 11:10 -

картинку в див по-любому надо, а иначе ничего не получается. дописал js, но пролблемка. текст кликабелен, но выводится он как простой текст без ссылки, тоже самое с картинкой...

ПафНутиЙ
Админ

ПафНутиЙ - 4 февраля 2012 13:58 -

эээх
<div class="class">
][xfgiven_image]<img src="[xfvalue_image]" alt="{title}" />[/xfgiven_image]
<h2><a href="{full-link}" title="{title}">{title}</a></h2>
</div>


.class {
cursor: pointer;
background: #323232;
color: #ccc;
}
.class img {
display: block;
padding: 1px;
margin: 0 0 10px 0;
border: solid 1px #ccc;
}
.class:hover img {
border: 1px solid #dcdcdc;  
}
.class:hover img + h2 a {
color: #474646;
}
.class:hover h2 a {
color: #474646;
}

ну и js не забудь.

Каков вопрос - таков и ответ. Просто помните об этом.

hosts
Юзер

hosts - 4 февраля 2012 15:43 -

работает, но при наведении на текст выделяется всё

ПафНутиЙ
Админ

ПафНутиЙ - 4 февраля 2012 15:54 -

опечатка))
вместо
.class:hover h2 a
надо
.class h2 a:hover

Каков вопрос - таков и ответ. Просто помните об этом.

hosts
Юзер

hosts - 4 февраля 2012 20:06 -

к сожалению не помогло sad

hosts
Юзер

hosts - 4 февраля 2012 22:55 -

решил проблему сам. всё оказалось на столько просто

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх