Я пытаюсь создать эффект, при котором наведите курсор на какой-либо текст, чтобы изображение в другой части страницы изменилось на другое изображение, пока мышь не удалится от текста. Кто-нибудь знает простой способ сделать это? Я бы предпочел использовать только CSS, но будет использовать js, если это необходимо.mouseover banner контролируется текстом
Возможно получить взаимодействие между различными элементами, используя только CSS, но это непросто. Насколько я вижу, это создает некоторые ограничения для вашей структуры документа (возможно, кто-то, у кого больше знаний о CSS-селекторах, чем я, может видеть, как это происходит). Пожалуйста, рассматривайте это как доказательство концепции, а не полное решение. Обратите внимание, что для этого требуется поддержка уровня CSS 2.
<html>
<head>
<style>
img { float: right }
p.magicParagraph + img { display: none }
p.magicParagraph:hover + img { display: block }
p.magicParagraph + img + img { display: block }
p.magicParagraph:hover + img + img { display: none }
</style>
</head>
<body>
<p class="magicParagraph">Hover over me to change the image!</p>
<img src="image1.png" />
<img src="image2.png" />
</body>
</html>
Получение такого типа взаимодействия между мышью и различными элементами не должно сопровождаться только CSS. Вам нужно будет использовать Javascript. В следующем примере используется jQuery Framework (просто аддон для сырой JavaScript), чтобы изменить источник изображения при наведении курсора мыши на пункт:
$("p.magicParagraph").hover(
function() { $("img.magicImage").attr("src", "image2.jpg"); },
function() { $("img.magicImage").attr("src", "image1.jpg"); }
);
Этот код связывает множество событий к зависанию любого пункта, имеющему Classname "magicParagraph". Первая функция - это то, что будет сделано, когда вы перейдете по абзацу, а вторая - это то, что будет сделано, когда вы перейдете от абзаца. Это будет функционировать со следующей разметкой:
<p class="magicParagraph">Hover over me to change the image!</p>
<p><img src="image1.jpg" class="magicImage" /></p>
Думаю, я пойду с этим! Спасибо. Я также попробую один ниже, так что спасибо парню, который ответил только с помощью CSS-версии! –
@Alex C: Добро пожаловать на сайт. Я согласен, что вы, вероятно, должны пойти со стандартным Javascript-решением, а не только с CSS, но вы просили только CSS, так что я дал вам. : -P Не забудьте принять ответ после тестирования - используйте зеленый галочку. Достаточно подождать 24 часа, прежде чем делать это, если вы хотите увидеть ответы от большего числа людей. –
Добро пожаловать в StackOverflow - позвольте мне быть первым, кто вознаградит вас 12 очками за продуманный вопрос! – Sampson