Как загружать контент при касании или наведении курсора мыши?

Question

Как загрузить контент HTML при наведении курсора мыши или touchmove с помощью javascript?

Например, я хочу загружать весь контент <div id="mydiv"> только тогда, когда пользователь наводит на него указатель мыши.

<div id="mydiv"> 
    <p>content</p> 
    <span> something </span> 
</div>

Я хочу, чтобы он улучшил производительность по скорости страницы. Использование CSS бесполезно

javascript html

-2

Uzair 22 Окт 2019 в 16:21

1

Значит, часть контента по умолчанию скрыта? Я бы предложил использовать для этого CSS. Изучите селектор :hover. Также обратите внимание, что это будет отображать / скрывать контент, а не технически загружать контент.

–

Rory McCrossan

22 Окт 2019 в 16:22

Вы должны управлять отображением / скрытием, не нужно загружать контент.

–

Devsi Odedra

22 Окт 2019 в 16:27

Я хочу, чтобы он работал лучше с javascript или jQuery

–

Uzair

22 Окт 2019 в 18:26

Answer 1

Попробуйте, используя прозрачность CSS

#mydiv:hover {
  opacity: 100;
  cursor: pointer;
}
#mydiv {
  opacity: 0;
  cursor: pointer;
}

<div id="mydiv" > 
  <p>content</p> 
  <span> something </span> 
</div>

2

Yahiya 22 Окт 2019 в 16:35

Answer 2

Для плавного перехода:

#mydiv {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
}

#mydiv:hover {
opacity: 1;
}

<div id="mydiv"> 
    <p>content</p> 
    <span> something </span> 
</div>

0

Amirado 22 Окт 2019 в 17:22

Как загружать контент при касании или наведении курсора мыши?

2 ответа

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

Новые вопросы

javascript