Как сделать так, чтобы CSS-указатель влиял на другой тег?

Question

Допустим, у меня есть следующее:

<style>
    .myLabel {
      color: blue;
    }
    .myLabel:hover {
      color:red;
    }
</style>
<div>
    <img src='myimage.png' />
    <span class='myLabel'>Image Label</span>
</div>

Можно ли заменить изображение (также через css), когда оно наводится на промежуток? Если да, то как я могу это сделать?

Answer 1

Кажется, что нет никакого селектора брата для предыдущего братьев и сестер.

W3 определено смежных братьев и сестер и некоторая поддержка браузера, по-видимому, доступна для общих братьев и сестер - но оба предназначены для подписан Брат или сестра.

Итак, я думаю, вам будет проще выполнить с :hover установленным в div.

И я никогда не слышал о том, чтобы CSS мог изменять атрибут src. О единственном способе, которым я могу думать, что может работать, чтобы изменить изображение с помощью CSS, это иметь src прозрачное изображение и изменять background-image.

<style>
    .myLabel img { background-image: url('...'); }
    .myLabel span { color: blue; }
    .myLabel:hover img { background-image: url('...'); }
    .myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
    <img src='transparent.png' />
    <span>Image Label</span>
</div>

Answer 2

Более простой способ сделать это - удалить элемент img и сделать изображение фоновым на span. Затем вы можете управлять фоновым изображением в двух ваших правилах CSS:

.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }

Тогда вам просто нужно немного CSS, чтобы расположить фоновое изображение и, возможно, добавить достаточно отступов, чтобы фоновое изображение не перекрывало текст.

Answer 3

Нет, вы не можете заменить значение атрибута src любым способом.

Джонатан Лановски Сказал: И я никогда не слышал о том, чтобы CSS мог изменять атрибут src. Единственный способ, которым я могу подумать, что может сработать, чтобы изменить изображение с помощью CSS, это иметь src прозрачное изображение и изменить background-image.

Помните значение IMG-элемента. Предполагается, что изображение будет отображаться как контент, а не как презентация. Если вы вставите прозрачный .gif или что-либо еще в атрибут src, вы также удалите контент со страницы.

То же самое относится к использованию различных CSS-hover-технологий для изменения изображения, вы по-прежнему удаляете контент, пока у вас нет фактического изображения в атрибуте src. Кроме того, вы не сможете изменить изображение при наведении на элемент span, если документ помечен так, как он есть.

Итак, это типичная работа Javascript.

Answer 4

Вы также можете поместить изображение в промежуток:

<div class='myLabel'>
    <span>
      <img src='transparent.png' />
      Image Label
    </span>
</div>

Тогда ваш css будет:

.myLabel span:hover img { ... } 

Только для справки теги работают с: hover в IE6 (но он в любом случае стар

Answer 5

Один метод состоит в том, чтобы в одном файле изображений было несколько изображений, и вы используете правила CSS, чтобы изменить смещение в отображаемом файле.

см .: http://www.alistapart.com/articles/sprites/

, в частности, раздел "Наведение".

Здесь предлагается функциональный пример:

http://www.alistapart.com/d/sprites/ala-image3.html

РЕДАКТИРОВАТЬ: Я только что понял, что вы попросили изменить изображение, а затем наведите курсор мыши на span , а не на само изображение. Я полагаю, что для этого вам понадобится JavaScript.