баннер при наведении курсора на текст - PullRequest
Новая
       21

баннер при наведении курсора на текст

3 голосов
/ 14 декабря 2009

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

Ответы [ 2 ]

2 голосов
/ 14 декабря 2009

К этому типу взаимодействия между мышью и различными элементами нельзя подходить только с помощью 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>
0 голосов
/ 14 декабря 2009

Возможно получить взаимодействие между различными элементами, используя только 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>
...