Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Стили (CSS) » Как одновременно подсветить картинку с находящимся ниже текстом

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

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

вопрос

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



.video_image {
    width: 210px;
    height: 125px;
    overflow: hidden;
    position: relative;
    border: 1px solid #777;
    }

.video_image:hover { 
    border: 1px solid #dcdcdc;    
}

.video_image img {
    width: 210px;
}
            
.video_title {
    padding: 5px 5px 10px 5px;
}
        
.video_title a {
    color: #cfcfcf;
    font-size: 13px;
        font-weight: bold;
}
        
.video_title a:hover {
    color: #fff;
}
            
.video_title h2 {
    padding: 0 0 5px 0;    
}
            
.video_title h2 a {
    color: #474646 !important;
    text-decoration: none;
}
        
.video_title h2 a:hover {
    color: #fff !important;
}

Вывод в shortstory.tpl (используются доп. поля)



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

<div class="video_title">
<h2>[full-link]{title}[/full-link]</h2>
</div>

Как это выглядит:

Как должно быть:

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

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

Псевдоэлемент :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 - 2015-05-143 февраля 2012 23:51 - #3499

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

Юзер

hosts - 2015-05-144 февраля 2012 01:38 - #3500

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

Админ

3457

ПафНутиЙ - 2015-05-144 февраля 2012 02:32 - #3501

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

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

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

Юзер

hosts - 2015-05-144 февраля 2012 02:50 - #3503

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

Показать / Скрыть текст

video_image a {
display: block;  
height: 125px; 
border: 1px solid #777; 
color: #cfcfcf;
font-size: 11px;
font-weight: bold;
}
.video_image:hover a {
border: 1px solid #dcdcdc;
}
.video_image img {
width: 210px;
height:125px;
} 
.video_image h2 a {
display: inline; 
color: #474646;
text-decoration: none;
border: none; 
}
.video_image:hover h2 a {
border: none; 
color: #fff;
}

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

Админ

3457

ПафНутиЙ - 2015-05-144 февраля 2012 03:11 - #3504

Зачем заключать картинку в див?
да и вообще как то всё неправильно. Заче ссылка у картинки и у заголовка? нужно убрать одну из ссылок и если хочешь чтоб блок кликабельный был и дописать js

$(function () {
    $(".class")
    .click(function(){window.location=$(this).find("a").attr("href"); return false;});
});

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

Юзер

hosts - 2015-05-144 февраля 2012 11:10 - #3506

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

Админ

3457

ПафНутиЙ - 2015-05-144 февраля 2012 13:58 - #3509

эээх

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