Появление текста при наведении на ссылку

Question

Как при наведении на определенную ссылку сделать так чтобы появлялся определенный текст. То есть, допустим, у меня есть список, в нем ссылка с классом link-html. Как при наведении на нее сделать так чтобы появлялся текст с классом text-html

.text-html {
    display: none;
}

.text-css {
    display: none;
}

.text-java {
    display: none;
}

a {
    display: inline-block;
}

a.link-1:hover + .text .text-html {
    display: inline-block;
}

a:hover + .text .text-css {
    display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>Языки программирования Web-страниц</h1>
        <div class="list">
            <ul>
                <li><a href="" class="html-link">HTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">JavaScript</a></li>
                <li><a href="#">XML</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </div>
        <a class="link-1" href="">Ссылка-1</a>
        <a href="">Ссылка-2</a>
        <a href="">Ссылка-3</a>
        <div class="text">
            <div class="text-html">
                <h2>HTML</h2>
                <p>(от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.</p>
            </div>
            <div class="text-css">
                <h2>CSS</h2>
                <p>( от англ. Cascading Style Sheets, «каскадные таблицы стилей») — это язык стилей, с помощью которого оформляют веб-страницы. Он определяет, как именно должны отображаться элементы HTML, включая макет, цвета, шрифты и другие визуальные аспекты.</p>
            </div>
            <div class="text-java">
                <h2>JavaScript</h2>
                <p>прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

По-моему у вас проблема с выбором соседнего элемента: CSS-селектор a.link-1:hover + .text .text-html не отображал текст, так как .text-html не был непосредственно следующим за ссылкой, из-за чего + не применим

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 200px;
}

.list a {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.link-container {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.text-html,
.text-css,
.text-java {
  display: none;
  width: 250px;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  position: absolute;
  left: 220px;
  top: 0;
}

.link-container:hover .text-html {
  display: block;
}

.link-container:hover .text-css {
  display: block;
}

.link-container:hover .text-java {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <div>
    <h1>Языки программирования Web-страниц</h1>
    <div class="list">
      <div class="link-container">
        <a href="#" class="html-link">HTML</a>
        <div class="text-html">
          <h2>HTML</h2>
          <p>(от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.</p>
        </div>
      </div>
      <div class="link-container">
        <a href="#" class="css-link">CSS</a>
        <div class="text-css">
          <h2>CSS</h2>
          <p>(от англ. Cascading Style Sheets, «каскадные таблицы стилей») — это язык стилей, с помощью которого оформляют веб-страницы.</p>
        </div>
      </div>
      <div class="link-container">
        <a href="#" class="js-link">JavaScript</a>
        <div class="text-java">
          <h2>JavaScript</h2>
          <p>Прототипно-ориентированный сценарный язык программирования, широко используется в браузерах для интерактивности.</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

Появление текста при наведении на ссылку

Ответы (1 шт):