Как сделать так, чтобы изображение появлялось при наведении текста на исходную веб-страницу - PullRequest
Новая
       33

Как сделать так, чтобы изображение появлялось при наведении текста на исходную веб-страницу

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

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

Вот краткая диаграмма того, что мне нужно после

enter image description here

1 Ответ

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

Вы можете сделать это с помощью CSS-состояний, для простого примера: 

.rolloverImage {
    display:none;
}
.rolloverImage:hover {
    display:block;
}

<img class="rolloverImage" ... />

Это скрывает элемент, к которому применяется класс, и показывает его при наведении курсора мыши, но мы можем настроить это, чтобы скрыть элемент и показать, когда что-то else находится над: 

.rollover img {
    display:none;
}
.rollover:hover img {
    display:block;
}

<span class="rollover">
  <!-- some none hidden text here -->
  <img ... />
</span>

Без подробностей вашей текущей настройки, это может не просто влиться в вашу работу; но принцип прост: включите вашу таблицу стилей (при условии, что она у вас уже есть, если нет, создайте ее) на веб-странице с помощью <link />; реализуйте свои стили соответственно, затем примените class к соответствующим элементам.

Это примитивный, а не полный пример, очевидно, вам нужно будет поработать с этим, чтобы получить желаемый результат (например, показывать ли как block, inline-block, или в абсолютной позиции, и т. Д. .)

...