Возможен ли этот эффект многократного наведения мыши только с использованием CSS? - PullRequest
Новая
       44

Возможен ли этот эффект многократного наведения мыши только с использованием CSS?

3 голосов
/ 28 ноября 2011

Может ли кто-нибудь сказать мне, возможно ли отображать эффект наведения здесь только с помощью CSS? Действительно хотел бы использовать это для моего веб-сайта, если я могу понять это (пока не повезло).

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

Как видно из примера, когда пользователь наводит курсор на кнопку, изображение «появляется» / меняется над кнопкой, и цвет фона кнопки, а также div под кнопкой, оба меняются.

Кто-то сказал мне, что у меня может быть что-то вроде следующего решения для всех 3 классов , а затем используйте некоторые встроенные стили для фоновых спрайтов на кнопке и изображении (а также ширину div под кнопкой ). Может быть, я их не понимал, поскольку свойства hover не распространялись на дочерние классы, когда я это пробовал ... 

.button, .imageAbove, .divBelow {
    background-color: #CCCCCC;
    background-position: left top;
    background-repeat: no-repeat;
    width: 160px;
    height: 40px;
}

.button:hover, .button:hover .imageAbove, .button:hover .divBelow {
    background-color: #FFFFFF;
    background-position: 0 -40px;
}

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

Если бы кто-нибудь мог меня поправить, это было бы очень ценно!

Спасибо

Ответы [ 5 ]

4 голосов
/ 28 ноября 2011

Вам не нужны ни встроенные стили, ни разделительный элемент.

Используйте соседний селектор брата: +

a:hover + .box{}

Кроме того, этоесть проблемы в IE 7 и ниже, но вы также можете использовать общий селектор брата: ~

a:hover ~ .image {}

Однако вы можете обойти ошибку IE, просто указав более конкретную информацию:

a:hover + .box + .image{}

Демонстрация

1 голос
/ 28 ноября 2011

Я думаю, что вам нужен один внешний контейнер div, где должны быть три элемента, где вы хотите, чтобы произошли изменения. Затем вам нужно иерархическое наследование в css при наведении курсора на этот внешний div, например, (http://jsfiddle.net/HerrSerker/ahJHb/)

<!-- HTML -->
<div class="outer">
    <div class="inner1">
    </div>
    <div class="inner2">
    </div>
    <div class="inner3">
    </div>
</div>

/* CSS */

div.outer {
    width: 100px;
}
div.outer div.inner1 {
    height: 20px;
    width: 50px;
}

div.outer div.inner2 {
    height: 20px;
    width: 100px;
    background: yellow
}

div.outer div.inner3 {
    height: 20px;
    width: 80px;
}

div.outer:hover div.inner1 {
    background: url(http://lorempixel.com/50/20)
}

div.outer:hover div.inner2 {
    background: gray;
}

div.outer:hover div.inner3 {
    background: gray;
}
0 голосов
/ 28 ноября 2011

Вот то, что я придумал .

HTML: 

<div class="wrap">
    <div class="image"></div>
    <div class="button"></div>
    <div class="caption"></div>
</div>

CSS: 

    .wrap { 
height:30px;
width:200px;
margin-top:30px; }

.image {
width:200px;
height:30px;
background-color:red;
display:none;
position:absolute;
margin-top:-30px; }

.button { 
width:200px;
height:30px;
background-color:blue; }

.caption { 
width:300px;
height:30px;
background-color:green;
display:none; }

.wrap:hover > * { display:block; }

Этот код делает еготак что вам нужно только навести курсор над .button div.Это достигается простой настройкой полей и высоты на .wrap div.

0 голосов
/ 28 ноября 2011

Хотя это возможно в CSS, я не думаю, что было бы целесообразно сделать это.

Вот скрипка с использованием элемента привязки: http://jsfiddle.net/MS9hV/

Из технического POV по умолчанию можно фокусировать только ссылки и элементы формы, поэтому лучше придерживаться этих элементов, даже если IE7 + и другие могут стилизовать любой элемент, на который наведен курсор. Есть люди, которые не могут / не используют мышь (и есть смартфоны). Всегда используется простое правило CSS: фокусируйтесь везде, где вы используете: зависайте (или подумайте, как лучше всего добиться того же эффекта, если это невозможно)

Основная проблема: почему вы хотите скрыть контент? Это неважно? Почему пользователь должен догадаться, что он должен сначала нажать / навести курсор на какую-то область экрана? Существует законное использование этого (и много чего можно поиграть в CSS2.1 и 3: target и подобные), но вы должны быть осторожны с юзабилити (а затем и с доступностью). Мне кажется, юзабилити будет страдать:)

0 голосов
/ 28 ноября 2011

К сожалению, этого невозможно достичь только с помощью css, так как вам нужно заглянуть в будущее, чтобы увидеть, содержит ли элемент другой элемент (я думаю, псевдо-селекторы: contains-element или: contains используется для работы, но больше не является частью css).Однако это довольно просто с jQuery, использующим атрибут «.hover» и добавляющим классы к целям.

РЕДАКТИРОВАТЬ: @bookcasey доказал, что я неправ.

...