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

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


     03.02.2012    Стили (CSS)    2706

вопрос
Нужно подсветить картинку вместе с текстом одновременно. Моих сил в 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
1

54 | 43

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

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

hosts
1

54 | 43

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

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

ПафНутиЙ
1065

3395 | 2433

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

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

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

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

hosts
1

54 | 43

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

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

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

ПафНутиЙ
1065

3395 | 2433

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

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

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

hosts
1

54 | 43

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

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

ПафНутиЙ
1065

3395 | 2433

ПафНутиЙ - 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
1

54 | 43

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

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

ПафНутиЙ
1065

3395 | 2433

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

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

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

hosts
1

54 | 43

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

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

hosts
1

54 | 43

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

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

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

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