2

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

Имеется код: https://plnkr.co/edit/HbXwesDa5pxcz72eTNoc?p=preview

p {
  position: relative;
  display: inline-block;
}

span {
  position: absolute;
  display: inline-block;
  background: #000;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
}

p:hover span {
  display: none;
}
<p>
  123123123
  <span></span>
</p>

Но есть проблема - текст должен быть внутри span'a, вложенного в абзац. Это не подходит, если скрыть нужно одно или несколько слов в предложении, а не целый абзац. Как это решить?

2
  • Использовать классы вместо тегов?
    – vp_arth
    23 фев 2017 в 17:23
  • Да, либо тэги с классами 23 фев 2017 в 17:24

2 ответа 2

1

Просто создайте класс для этого:

.hidden-text {
  color: #000;
  background-color: #000;
}
.hidden-text:hover {
  color: inherit;
  background-color: inherit;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non lacus lobortis, scelerisque mi id, placerat nulla. Sed tortor quam, tincidunt vel fringilla at, rhoncus id sapien. Suspendisse blandit elementum nulla a consequat.<span class="hidden-text">Скрытый текст</span> Vivamus faucibus quis sem ac finibus. Vestibulum quam est, egestas eget viverra et, suscipit sed nisi. Maecenas ac magna lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

1
  • Да, именно то, что надо. Спасибо. 23 фев 2017 в 17:39
1

А просто сделать текст чёрным и фон тоже? :D

p {
  color: #000;
  background: #000;
  float: left;
}

p:hover {
  color: #fff;
}
<p>Hello, world!</p>

1
  • 1
    Нет, предложенный ранее вариант как раз то, что нужно 23 фев 2017 в 17:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.