Последнее обновление: 3 Января 2022 г.

Как изменить html-код в элементе после наведения мыши на него

Иногда возникает потребность - изменить содержимое элемента html при наведении на него мыши. Требуется сменить надпись или даже применить к ней иные свойства CSS: к примеру, изменить начертание или размер шрифта. А то и добавить картинку, кнопку или что еще.

Конечно, все это несложно сделать средствами javascript. Но, мы здесь рассмотрим, как обойтись при этом чистым CSS. Ведь чем больше скриптов на странице, тем медленнее она отрисовывается браузером, медленнее загружается с сервера.

Код HTML:


<div class="butt">    
<div class="butt_div2">
<div>Текст изменился, <strong style="color: green">как видно</strong>.
</div>
</div>    
<div class="butt_div1">
<div>Чтобы изменить этот текст, наведите сюда мышь!  &#9660;
</div>
</div> </div>

Свойства CSS:

.butt {
    height: 100px; width: 100px;
    font-size: 14px; border: solid 4px;
    position: relative}

.butt_div1, .butt_div2 {
    position: absolute; margin: 0; left: 0; right: 0; top: 0; bottom: 0;
    text-align: center; display: table; height: 100%; vertical-align: middle;}

.butt_div1 {background-color: #00e900;}
.butt_div2 {background-color: gainsboro;}

.butt_div1 > div {display: table-cell; border: solid blue 4px; vertical-align: middle}
.butt_div2 > div {display: table-cell; border: solid darkgrey 4px; vertical-align: middle}

.butt_div1:hover {color: transparent;  background-color: transparent; border: none}
.butt_div1:hover > div {border: none}
.butt_div2:hover {color: red;}

Однако, все сделано на чистом CSS

Да, именно так! Безо всякого javascript. Посмотрим, как это устроено. Пока мышь не наведена на элемент, отображается надпись "Чтобы изменить этот текст, наведите сюда мышь! ▼", т.е. от ображается элемент, имеющий класс butt_div1. Элемент с классом butt_div2 НЕ отображается, ибо поверх него нанесен элемент с классом butt_div1. Отметим, что оба они имеют абсолютное позиционирование и непрозрачный фон - это-то и дает возможность закрыть элемент с классом butt_div2 при помощи элемента с классом butt_div1. Иными словами, элемент с классом butt_div2, пока не наведена мышь, будет полностью закрыт другим элементом и потому - с экрана его не заметно.

Когда наводим мышь, все немного меняется: элемент с классом butt_div1 получает прозрачный фон, прозрачный же цвет шрифта и у него удаляется граница. Т.е., по сути, он конечно, никуда не девается и остается на своем "законном" месте, но становится полностью прозрачным и потому - через него виден элемент с классом butt_div2, в котором присутствует надпись "Текст изменился, как видно."

Казалось бы, вместо
butt_div1:hover {color: transparent; background-color: transparent; border: none}
неплохо было бы "упростить", применив
butt_div1:hover {display: none}

Т.е. - попросту удалить этот элемент. Однако, так делать НЕ советуем. Вы можете самостоятельно попробовать это сделать и посмотреть, что получится... При перемещении мыши по элементу он будет "дергаться" (по крайней мере, в браузере Firefox), что вызвано периодическим появлением то элемента с классом butt_div2, то - элемента с классом butt_div1. В самом деле, как только при наведении мыши сработает правило butt_div1:hover {display: none}, соответствующий элемент удаляется со страницы (но, в исходном коде остается, конечно). Это означает, что мышь... перестает быть наведенной на него. Ибо невозможно навести мышь на то, чего на странице нет. Следовательно, правило butt_div1:hover {display: none} перестает работать, что приводит, очевидно, к появлению соответствующего элемента - вновь. Однако, почему не применяется правило .butt_div2:hover {color: red;}? вроде как, надпись "Текст изменился," должна красным цветом окрашиваться?

Дело в том, что, несмотря на то, что элемент с классом butt_div1 стал полностью прозрачным, тем не менее, он не исчез со страницы. А раз так, он мешает наведению мыши на элемент, расположенный под ним (имеющий класс butt_div2). Потому, последний будет лишь просвечивать сквозь прозрачный элемент, но на мышь реагировать не будет.

Как 7777 ситуацию?

Например, так:

Код html остается тем же самым, а CSS немного изменяется:

.butt_ {
    height: 100px; width: 100px;
    font-size: 14px; border: solid 4px;
    position: relative}
.butt_:hover .butt_div1_ {display: none}

.butt_div1_, .butt_div2_ {
    position: absolute; margin: 0; left: 0; right: 0; top: 0; bottom: 0;
    text-align: center; display: table; height: 100%; vertical-align: middle;}

.butt_div1_ {background-color: #00e900;}
.butt_div2_ {background-color: gainsboro;}

.butt_div1_ > div {display: table-cell; border: solid blue 4px; vertical-align: middle}
.butt_div2_ > div {display: table-cell; border: solid darkgrey 4px; vertical-align: middle}

.butt_div2_:hover {color: red;}

Как видим, после наведения мыши часть текста в элементе "покраснела"

В самом деле, теперь, после того, как наведена мышь на РОДИТЕЛЬСКИЙ элемент, содержащий элемент с классом butt_div1, последний перестает отображаться на странице. А это означает, что теперь он (в отличие от предыдущего случая) доступен для событий мыши в CSS. В частности, на нем срабатывает событие наведения мыши и, следовательно, применяются соответствующие правила. Последний способ, разумеется, более предпочтителен.

При его помощи возможно, к примеру, произвольно изменить оформление кнопки при наведении на нее мыши, добавить любой код html. Кстати, для других событий мыши также можно реализовать подобную функциональность (для тех, которые поддерживаются CSS). Например, для событий нажатия кнопки мыши в данный момент (active). Для этого следует в конец перечня свойств CSS добавить строчку
.butt_div2_:active {color: yellow;}

При этом, при нажатии на элемент цвет красного текста сменится на желтый.

Так что вот, все на чистом CSS, без javascript. И работает, однако. Даже в довольно старых браузерах.