Непрозрачность при наведении курсора и горе текста - PullRequest
Новая
       14

Непрозрачность при наведении курсора и горе текста

0 голосов
/ 20 февраля 2012

Я пытаюсь провести небольшую оптимизацию на своем веб-сайте, и это привело меня к тому, что кажется довольно распространенной темой, но я не смог найти проблему, похожую на мою.

Что у меня было. Спрайт изображения (туманный / прозрачный) и текст поверх него. Когда вы наведете курсор на изображение, оно может стать четким, когда вы наведете курсор на текст, оно будет выделено и станет синим. (Изображение останется четким)

Что я хочу. Сократить спрайт в одно изображение (а не два в одном), так как это самый большой файл на моей главной странице, и 57% моего времени загрузки тратится на изображения.

Что я сделал:

1) Перешел от спрайта к одному четкому изображению.

2) Создал новый контейнер div 'foggy-img', поместил его поверх изображения, белого цвета с непрозрачностью: 0,15

3) Создал новый контейнер div 'img-text' для текста, чтобы поместить его вне 'foggy-img', чтобы прозрачность не влияла на него, и поместил его в нужное место.

Проблема: она маленькая, прозрачная коробка хорошо заменила спрайт и работает. Текст также выделяется красиво. Но. Когда человек наводит курсор на текст, прозрачная рамка снова становится «туманной».

Можно ли как-нибудь очистить «туманный ящик» при наведении курсора на текст, который находится в отдельном элементе div?

HTML: 

 <div id="photo-feature">
    <a href="services.html">
        <div id="img">
            <div id="photo-fog"></div>
            <div id="photo-text"><h3>Learn More...</h3></div> 
        </div>
    </a>
</div>

CSS: 

#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }

#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }

#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }

1 Ответ

2 голосов
/ 20 февраля 2012

Вы можете использовать соседний селектор братьев и сестер. ( подробнее ) Хотя он не работает в старых браузерах (угадайте, какой).

Вам придется немного поменять местами порядок HTML. В основном сначала поместите текст, а затем используйте что-то вроде этого: 

#photo-text:hover + #photo-fog { // Do something

Прямо сейчас вы не сможете установить наведите курсор на H3, но почему бы просто стилизовать h3 вместо элемента # photo-text, тогда он будет работать нормально.

Редактировать: Красиво скоординированную цветовую скрипку JS для вас, чтобы посмотреть: http://jsfiddle.net/will/Gt8KX/

Надеюсь, это поможет:)

...