Про transition и hover эффект

@Muradon · Регистрация: 13.03.2016

Author24 — интернет-сервис помощи студентам

Есть следующий код

HTML5

<li>
<div class="dark-img">
<h1>LUX ROOM</h1>
<button onclick="location.href='#'">BOOK IT</button>
</div>
<img src="https://www.cyberforum.ru/img/lux.jpg">
</li>

css:

CSS

li{
    width: 650px;
    height: 250px;
    background-color: #16a085;
    display: inline-block;
    transition: 0.4s;
    margin: 20px;
    overflow: hidden;
}
li:hover{
    background-color: #3498db;
}
li img{
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
}
.dark-img{
    opacity: 0;
    width: 325px;
    height: 250px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.4s;
    margin-left: 325px;
}
.dark-img h1{
    color: white;
    font-family: 'Lato';
    margin-top: 50px;
}
.dark-img button{
    background-color: #16a085;
    border: none;
    color: white;
    font-family: 'Lato';
    font-size: 15px;
    transition: 0.4s;
    width: 100px;
    height: 50px;
    margin-top: 30px;
}
.dark-img button:hover{
    background-color: #3498db;
}
li:hover .dark-img{
    opacity: 1;
    margin-left: 0px;
}

По сути при наведении на li, то должен появляться блок dark-img. Но у меня проблема в том, что после того как я убираю курсор от li, то dark-img исчезает. Как можно сделать так чтобы он не исчезал?

@aj17 · 15.09.2017, 17:00

что-то типа такого:

HTML5

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.some-hover-class').hover(
        function() {
          $(this).addClass('active')
        },
      );
    });
 
  </script>
  <style>
    li {
      width: 650px;
      height: 250px;
      background-color: #16a085;
      display: inline-block;
      transition: 0.4s;
      margin: 20px;
      overflow: hidden;
    }
    
    li.active {
      background-color: #3498db;
    }
    
    li img {
      width: 50%;
      height: 100%;
      float: left;
      overflow: hidden;
    }
    
    .dark-img {
      opacity: 0;
      width: 325px;
      height: 250px;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      transition: 0.4s;
      margin-left: 325px;
    }
    
    .dark-img h1 {
      color: white;
      font-family: 'Lato';
      margin-top: 50px;
    }
    
    .dark-img button {
      background-color: #16a085;
      border: none;
      color: white;
      font-family: 'Lato';
      font-size: 15px;
      transition: 0.4s;
      width: 100px;
      height: 50px;
      margin-top: 30px;
    }
    
    .dark-img button:hover {
      background-color: #3498db;
    }
    
    li.active .dark-img {
      opacity: 1;
      margin-left: 0px;
    }
 
  </style>
</head>
 
<body>
  <li class="some-hover-class">
    <div class="dark-img">
      <h1>LUX ROOM</h1>
      <button onclick="location.href='#'">BOOK IT</button>
    </div>
    <img src="https://www.cyberforum.ru/img/lux.jpg">
  </li>
</body>
 
</html>

Новые блоги и статьи
Cisco ASA: подробное руководство по настройке и использованию hw_wired 25.01.2025 В сетевой безопасности межсетевые экраны играют критически важную роль в защите корпоративных инфраструктур от постоянно растущего числа киберугроз. Среди множества решений для обеспечения. . .	Cisco Intelligent Services Gateway: руководство по настройке hw_wired 25.01.2025 В сетевых инфраструктурах Cisco Intelligent Services Gateway (ISG) играет ключевую роль в организации и управлении сервисами для конечных пользователей. Этот компонент представляет собой. . .	Использование Go (Golang) в Highload-проектах: преимущества и особенности bytestream 25.01.2025 В мире высоконагруженных систем выбор правильного инструментария играет ключевую роль в успехе проекта. Go (Golang) представляет собой относительно молодой язык программирования, который быстро. . .	Откуда у float лишние цифры в конце дробной части. Представление чисел с плавающей точкой bytestream 25.01.2025 При разработке программного обеспечения часто возникает необходимость работать с вещественными числами, которые содержат дробную часть. В современных компьютерных системах такие числа представляются. . .	Как использовать глобальную переменную в функции в Python bytestream 25.01.2025 В программировании на Python глобальные переменные представляют собой особый тип переменных, которые доступны для использования во всех частях программы, включая различные функции, классы и модули. . . .	Как в цикле обойти все элементы map в Java bytestream 25.01.2025 В разработке на Java одной из наиболее востребованных структур данных является интерфейс Map, который предоставляет эффективный способ хранения и управления парами "ключ-значение". Разработчики. . .
Для чего нужен UserManager.isUserAGoat() в Android и как это использовать bytestream 25.01.2025 В мире Android-разработки существует множество интересных и порой загадочных функций, о которых знают далеко не все разработчики. Одной из таких функций является метод UserManager. isUserAGoat(),. . .	Как обойти масси в JavaScript. Всё о циклах bytestream 25.01.2025 JavaScript представляет собой мощный язык программирования, широко используемый в веб-разработке, где массивы и циклы являются фундаментальными концепциями для эффективной работы с данными. Массив в. . .	Как сделать, чтобы существующая ветка отслеживала удалённую в Git. Связывание локальных и удалённых веток bytestream 25.01.2025 В разработке программного обеспечения системы контроля версий стали неотъемлемой частью процесса создания качественного программного продукта. Эти инструменты позволяют разработчикам эффективно. . .	Как проверить, что файл НЕ существует с помощью Bash bytestream 25.01.2025 В системном администрировании проверка существования файлов является фундаментальной операцией, особенно при написании скриптов на Bash. Правильная обработка ситуаций, когда файл отсутствует,. . .	Как проверить, что строка пустая, неопределена или null в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript разработчики регулярно сталкиваются с необходимостью проверки строковых значений на различные состояния. Валидация данных является критически важным. . .	Как проверить существование ключа в объекте или массиве в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript программисты постоянно сталкиваются с необходимостью работать с объектами и массивами. Эти структуры данных являются фундаментальными элементами языка и. . .

	15.09.2017, 17:00