Функции Html и Css Hover

Question

Привет Я новичок в html и css, и я хотел бы отобразить текст с правой стороны, когда наведите указатель мыши на другой текст, который находится слева. У меня есть список текстов, отображаемых на левой стороне здесь является треском для него

<ul> 
    <li id="what">What Is Eco Flash?</li> 
    <br> 
    <li id="water">We Coneserve Water!</li> 
    <br> 
    <li id="chemicals">Chemicals Reduction!</a> 
    </li> 
    <br> 
    <li id="waste">No Waste-Water Run Off</li> 
</ul> 

и это мой CSS код списка, который будет отображаться на левой стороне

width:25%; 
text-align: left; 
font-family: 'Copperplate Gothic Light'; 
font-size: 20px; 
font-style: normal; 
font-variant: small-caps; 
font-weight: bold; 
text-decoration: none; 
margin:.2em; 
display: list-item; 

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

Я новичок в html и css, и я пробовал спам, но он отображается прямо под текстом. Как я могу получить текст объяснения справа?

Спасибо!

Answer 1

Вы можете добавить новый элемент в li:

<li id="water"> 
    We Coneserve Water! 
    <small>Explanation...</small> 
</li> 

который скрыт по умолчанию:

li small{ 
    display:none; 
} 

Затем покажите его, когда li завис над:

li:hover small{ 
    display:inline; 
} 

Answer 2

Мне нравится использовать :hover на родительском устройстве, а затем отображать дочерние элементы узел, как это:

Fiddle

ul li .description{ 
 
    display: none; 
 
} 
 
ul li:hover .description{ 
 
    display: inline; 
 
}

<ul> 
 
    <li id="what">What Is Eco Flash? <span class="description">Boom a description</span></li> 
 
    <li id="water">We Coneserve Water! <span class="description">Boom a description again</span></li> 
 
    <li id="chemicals">Chemicals Reduction!</li> 
 
    <li id="waste">No Waste-Water Run Off</li> 
 
</ul>

Answer 3

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

li:hover:after { 
 
    content: attr(data-explanation); 
 
    margin-left: 1em; 
 
}

<ul> 
 
    <li id="what" data-explanation="My explanation">What Is Eco Flash?</li> 
 
    <li id="water">We Coneserve Water!</li> 
 
    <li id="chemicals">Chemicals Reduction!</li> 
 
    <li id="waste">No Waste-Water Run Off</li> 
 
</ul>