Как я могу сделать это без использования JavaScript? - PullRequest
Новая
       30

Как я могу сделать это без использования JavaScript?

1 голос
/ 27 октября 2011

У меня есть страница с миниатюрой (еще не все, так что свойство float: left необходимо).Миниатюра - это Div, с якорем, в этом якоре - изображение и некоторый текст.Текст ниже изображения.Якорь катится в PDF-файл.Простой.

http://www.bridgecitymedical.com/forms

Проблема заключается в том, что при наведении курсора текст подчеркивается, а изображение большого пальца становится границей, а при наведении курсора на текст подчеркивается.изображение большого пальца.Что мне нужно, так это чтобы вы наводили курсор на текст или изображение, чтобы они ОБА применяли свои соответствующие состояния наведения, например, изображение получало границу, текст подчеркивался.На данный момент они функционируют сами по себе, но они должны быть едины, или это выглядит странно.

Вот разметка: 

<div class="form">
    <a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank">
        <div class="form-wrapper">
        <div class="form-thumb">
            <img src="/forms/thumbs/1.jpg" alt="" />
        </div>
        Caption
        </div>
    </a>
</div>

и css ... 

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}
.form-thumb:hover{
    border: 1px solid #000;
}

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

Можно ли это сделать без JavaScript!?

Решено Крисом (выбранный ответ).Вот его решение, с моим большим пальцем в скрипке ...

http://jsfiddle.net/7MLjZ/1/

Ответы [ 2 ]

3 голосов
/ 27 октября 2011

Используйте :hover состояние вместо .form-wrapper. 

<div class='wrap'>
    <div class='thumb'></div>
    Text!
</div>



.wrap{width:60px; height:80px;}
.thumb{width:60px; height:60px; background-color:blue;}
.wrap:hover{text-decoration:underline;}
.wrap:hover .thumb{border:5px solid black;}

http://jsfiddle.net/7MLjZ/

0 голосов
/ 27 октября 2011

Это должно работать, чтобы сделать и границу div изображения, и текст заголовка черным при наведении курсора: 

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}

.form:hover .form-wrapper .form-thumb {
    border: 1px solid #000;
}

a:hover {
    color:#000;
}
...