Вопрос по css – Как изменить изображение A при наведении курсора на изображение B без использования только JavaScript

1

Хотелось бы узнать, как обновить изображение A при наведении курсора на изображение B, используя только CSS? если нет, то как я это сделаю, используя только чистый JavaScript (без библиотеки). Но CSS действительно то, что я хочу использовать ....

Что ты пробовал? Cfreak
возможный дубликатHover one element, and change another (without using Javascript) j08691
Это полностью зависит от вашей HTML-разметки и трех отношений между элементами. David Thomas
jsfiddle.net/bxXJU но я не знаю, как сделать id = & quot; hv & quot; изменить, если я наведу курсор на id = & quot; bg & quot; Llewellyn
Единственный способ, которым я могу подумать, это сделать, если изображения близки, вы можете создать фоновое изображение, содержащее вариации, и соответственно переместить положение фона. В противном случае вам понадобится JS, что вы пробовали до сих пор? Matthew Riches

Ваш Ответ

4   ответа
3

В вашем конкретном случае это легко, так как#bg это ребенок#hv

Просто измените ваш зависания от того, что у вас есть на это:

#bg:hover #hv {...}

Смотрите мою вилку вашей скрипки здесь:http://jsfiddle.net/xJSQt/

Спасибо, что вы оба опубликовали почти то же самое, лол, но да, это будет отлично работать Llewellyn
+ 'd, будучи правильным и "опубликовать" время было идеальным :)
0

<div class="myImage">

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

.myImage{ background-image: url(imageA.jpg);} /*Set the normal image*/
.myImage:hover{ background-image: url(imageB.jpg);} /*Set the rollover image*/
Я думаю, что он имеет в виду обновление другого изображения, когда вы наводите курсор на другое изображение.
Я пропустил это. В любом случае это просто: селектор меняется на .myImage: hover myOtherImage {background-image: url (newimage.jpg);}
6

как я указал в комментариях. В отсутствие просмотра каких-либо наценок для работы я могу опубликовать только некоторые общие предложения; однако важно отметить, что элемент, на который вы хотите повлиять (F) должен появиться позже в DOM (быть дочерним элементом элементаFили быть последующим родным братом, или потомком последующего родного брата), чем элементE с которым вы хотите взаимодействовать.

Тем не менее, будут работать следующие подходы с соответствующей разметкой:

Sibling-based selection:

Зависание над первымimg Внутри#a переключаетdisplay последующегоimg элементы, используяE ~ F (общий брат) комбинатор:

<div id="a">
    <img src="http://www.lorempixel.com/200/400/nature" />
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>​​​​​

#a img.second,
#a img.first:hover ~ img.second {
    display: none;
}

#a img:hover ~ img.first {
    display: none;
}

#a img:hover ~ img.second {
    display: inline-block;
}​

JS Fiddle demo.

Зависший над#a изменения переключает отображение.first а также.second изображения внутри#b, с использованиемE + F (непосредственный брат) комбинатор:

<div id="a">
    <img src="http://www.lorempixel.com​​​​​​​​​​​​​​​​​​​​​​​​/200/400/nature" />
</div>
<div id="b">
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>​​​​​​​​​​​​​​​​​

#a,#b {
    float: left;
    border: 1px solid #000;
    padding: 0.2em;
}

img.second {
    display: none;
}

#a:hover + #b img.first {
    display: none;
}
#a:hover + #b img.second {
    display: inline-block;
}​

JS Fiddle demo.

Descendant-based selection:

С использованиемE F комбинатор общего потомка (я не совсем уверен, что символ пробелаis комбинатор, но независимо ... он основан наF быть потомкомE):

<div id="a">
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>​

#a img.second {
    display: none;
}

#a:hover img.first {
    display: none;
}

#a:hover img.second {
    display: inline-block;
}

JS Fiddle demo.

С помощьюE > F комбинатор непосредственный ребенок / непосредственный потомок:

<div id="a">
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <div>
        <img class="second" src="http://www.lorempixel.com/200/400/sports" />
    </div>
</div>​    div {
    display: inline-block;
}

img {
    display: none;
    border: 1px solid #000;
    padding: 0.2em;
}

#a > img {
    display: inline-block;
}

#a:hover img {
    display: inline-block;
}​

JS Fiddle demo.

Там & APOS; salso возможность использовать псевдоэлементы и контент, сгенерированный css (в совместимых / современных браузерах):

<div id="a"></div>​

#a {
    width: 200px;
    height: 400px;
    background-image: url(http://www.lorempixel.com/200/400/people);
    background-repeat: none;
    background-position: 50% 50%;
    position: relative;
}

​#a:hover::after {
    content: url(http://www.lorempixel.com/200/400/animals);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}​

JS Fiddle demo.

2

#hv при наведении на внешний элемент#bg, вы можете:

Видеть этоРабочая скрипка Пример!

#bg:hover #hv {
   ...
}
Спасибо! работает отлично... Llewellyn

Похожие вопросы