Сделать состояние CSS Hover остаётся после "unhovering"

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

Вот пример кода, который я использую:

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about:hover #onabout {
display: block;
}

Есть ли способ решить это, используя только CSS? Пока я не использовал javascript, и мне это не очень удобно.

В любом случае, любые решения будут с радостью приняты! Большое спасибо.

ОТВЕТЫ

Ответ 1

Здесь я иду с моей идеей CSS.

Вы можете использовать задержку перехода; http://jsfiddle.net/nAg7W/ 

div img {
    position:absolute;
    opacity:0;
    transition:0s 180s;
}
div:hover img {
    opacity:1;
    transition:0s;
}
div {
    line-height:1.2em;
    font-size:1em;
    color:black;
    transition:0s 180s;
}
div:hover {
    line-height:0;
    font-size:0;
    color:transparent;
    transition:0;
}

Разметка: 

<div>some text to hover to see an image wich is hidden as you read this
<img src="http://placehold.it/200x200&text=zi image" />

возможно, и щелкнуть, чтобы оно исчезло. http://jsfiddle.net/nAg7W/1/ 

div:hover img:focus {/* includes tabindex in html tag for img */
   opacity:0;
   transition:3s;
   -webkit-transform:rotate(-360deg) scale(0.23);
   -webkit-transform:rotate(-360deg) scale(0.23);
   -moz-transform:rotate(-360deg) scale(0.23);
   -o-transform:rotate(-360deg) scale(0.23);
   -ms-transform:rotate(-360deg) scale(0.23);
   transform:rotate(-360deg) scale(0.23);
}

Ответ 2

Как указывает @Leo Pflug, вы можете сделать это с некоторой уверенностью в CSS и HTML на и после клика, используя методы, подробно описанные здесь http://cssconf.com/talk-seddon.html.

С тиром JavaScript, это возможно и просто и надежно, как показано на @сдвиге ветра.

Однако чистый CSS при наведении и после него намного сложнее и, в зависимости от того, какие браузеры вам необходимо поддерживать, невозможен в настоящее время жизнеспособным способом. Проблема в том, что все, что вы изменяете с помощью селектора псевдокласса: hover, не будет (и/или не должно) совпадать с элементами, над которыми вы больше не зависаете.

Единственный способ, которым вы можете сделать это с чистым CSS - это CSS3 Animations. С этой целью я создал демонстрационную версию http://cdpn.io/GLjpK (v2 w/FF & IE), которая использует CSS-анимацию для перехода в состояние наведения при наведении и затем сохраняет это состояние до перезагрузки страницы.

@keyframes hover {
  0% {
    // normal styles
  }
  100% {
    // hover styles
  }
}

.class {
  animation-name: hover;
  animation-duration: 1ms;
  animation-fill-mode: backwards;
  animation-play-state: paused;      
}

.class:active,
.class:focus,
.class:hover {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

Я протестировал в нем последние версии Chrome, последние версии Firefox и IE 10. Работали во всех трех.

Примечание. У меня возникли проблемы с тем, что codepen не отображал последний сохраненный код, поэтому я создал новый здесь http://cdpn.io/GLjpK.

См. Остановка анимации CSS3 в последнем кадре счетчика итераций и Остановка анимации CSS3 в последнем кадре, что/почему/как.

ОБНОВЛЕНИЕ: Леа Веру теперь также продемонстрировала эту технику в своем посте Анимации с плавным состоянием и анимацией

Ответ 3

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

Будучи поклонником jQuery library (hehehe), вот мое решение.

CSS

ul li ul {
    display: none;
}
ul li.permahover ul {
    display: block;
}

Javascript с помощью jQuery

$("#onabout").one("mouseover", function() {
  $("#onabout").addClass('permahover');
});

Событие one привязывает обработчик к событию для элементов. Обработчик выполняется не более один раз для каждого элемента.

Demo

http://jsfiddle.net/jlratwil/w83BW/

Ответ 4

Это нужно сделать с помощью JavaScript, используя jquery, вы можете надолго добавить стиль следующим образом:

$(#onabout).onmouseover().css("display","block");

Ответ 5

Некоторые чистые идеи CSS

Я не совсем уверен, что вы намереваетесь "оставаться видимым". Вот некоторые разные мысли, основанные на ваших возможных целях, но у каждого есть возможные побочные эффекты, не предназначенные. Единственное чисто постоянное решение будет через javascript (как отмечали другие).

Долгое пребывание, но не постоянное

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

#about:hover #onabout,
#onabout:hover {
   display: block;
}

Постоянное "пребывание"

Если вы оберните #onabout в оболочку position: fixed, которая также отображается при наведении, и установите эту оболочку для исправления сверху, справа, внизу и слева от экрана, затем используйте эту оболочку :hover для сохранения #onabout он останется навсегда. Но он также будет находиться в фиксированном положении, и другие события или клики могут быть предотвращены. Это, вероятно, нежелательно, но опять же, я не знаю вашего конкретного приложения, поэтому вполне возможно, что идея будет работать на вас. Фактически вы установили display: block по умолчанию на #onabout и спрятали его через оболочку. Код для обертки и зависания будет выглядеть примерно так:

#permaHoverWrap {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
}

#about:hover #permaHoverWrap,
#permaHoverWrap:hover {
   display: block;
}

Так как #onabout находится в #permaHoverWrap в этом решении, он становится видимым через отображение фиксированной обертки, а затем остается таким образом гарантированным зависанием этой оболочки. Опять же, побочные эффекты этого решения могут быть слишком серьезными, за исключением случаев, когда это необходимо. Однако, как доказательство концепции, это можно сделать исключительно с помощью CSS.

Ответ 6

лучшим решением является добавление или удаление классов для элемента, подобного этому (выполняется с помощью JQUERY)

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about.hover #onabout {
display: block;
}

Обратите внимание, что я меняю: hover to.hover(Имя класса)

$("#about").hover(function(){
   $(this).addClass("hover");
});

Ответ 7

Я не думаю, что есть возможность сделать это с помощью: hover, полагаясь на чистый css. Если вы настаиваете на использовании css, вы можете изменить его на нажатие. Таким образом, когда пользователь нажимает на div, другой отображается постоянно. Вот так:

<style>
.onabout
{
    display: none;
}

input#activate
{
    display: none;
}

input#activate:checked + .onabout
{
    display: block;
}
</style>

<label for="activate">
    <div class="about">Click me</div>
</label>
<input id="activate" type="checkbox"></input>
<div class="onabout">Visible while checkbox:checked true or Radiobutton:checked true</div>
Флажок

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

Ответ 9

Просто наткнулся на ответ на ваш вопрос. См. Пример css ниже:

.Top_body_middle_headings_subtitle {
margin-top: 35px;
margin-left: 25px;
font-family: 'Roboto-Light';
font-size: 12pt;
color: #C77F0D;
transition: 600ms 3s;
}

or

.Top_body_middle_headings_par {
margin-top: 4px;
width: 180px;
margin-left: 25px;
font-family: 'Roboto-Light';
font-size: 9pt;
color: #745D26;
position: relative;
top: -30px;
left: -205px;
opacity: 0;
transition: opacity 2.5s 3s, left 600ms 3s, top 1.5s 3s;
}

второе число/запись в функции перехода действует как функция деблокирования. Фактически, ваш переход наведения будет иметь место и не вернется к нормальному состоянию до тех пор, пока период времени, указанный во второй записи (переход: 600 мс 3s; - этот пример будет представлять вашу мышь, фактически не зависающую от элемента в течение 3 секунд).

Надеюсь, что это поможет.

K.P.U

Ответ 10

Вам НЕ нужен Javascript, как предлагают многие в этой теме. Вот как это сделать с помощью только CSS:

(Вам нужно использовать видимость вместо отображения)

.btn-group .dropdown-menu {
  display: inline-flex;
  transition: all 0s ease 1s; /*delay 1s*/
  visibility: hidden;
}
.btn-group:hover .dropdown-menu {
  transition-delay: 0s;
  visibility: visible;
}