使 CSS Hover 状态在“unhovering”后保持答案

【问题标题】：Make CSS Hover state remain after "unhovering"使 CSS Hover 状态在“unhovering”后保持
【发布时间】：2013-06-14 02:31:09
【问题描述】：

我正面临一个以前从未真正处理过的小问题。我是一个初学者网页设计师，我最近在我的网页上的一个 div 上使用了 CSS 悬停功能。将鼠标悬停在此 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，而且我对它不太满意。

无论哪种方式，我们都会欣然接受任何解决方案！非常感谢。

【问题讨论】：

标签： html css

【解决方案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);
}

【讨论】：

在本例中，图像在鼠标离开其 div 区域后 3 分钟仍保留在屏幕上。几乎是永恒的，你可以缩短或延长持续时间:)

【解决方案2】：

正如@Leo Pflug 所指出的，您可以通过使用此处详细介绍的技术http://cssconf.com/talk-seddon.html 对CSS 和HTML在点击时和之后 充满信心地做到这一点。

使用少量 JavaScript 即可，简单可靠，如@Wind Shear 所示。

但是，

纯 CSS 悬停之后要困难得多，并且取决于您需要支持的浏览器，这在当前的生产环境中是不可能的大大地。问题是您使用 :hover 伪类选择器更改的任何内容都不会（和/或不应该）匹配您不再悬停的元素。

您可能能够使用纯 CSS 做到这一点的唯一方法是使用 CSS3 动画。为此，我创建了一个演示 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。

请参阅 Stop a CSS3 Animation at the last frame of the iteration-count 和 Stopping a CSS3 Animation on last frame 了解内容/原因/方式。

更新：Lea Verou 现在也在她的帖子 Smooth state animations with animation-play-state

中展示了这种技术

【讨论】：

这应该是公认的答案。这是唯一无需 javascript 即可完美运行的解决方案。

【解决方案3】：

您不能使用 CSS 永久保持悬停状态，因为它仅定义了标签、类、ID、伪类和状态的样式规则。所以不幸的是，你需要 Javascript 来解决这个问题。

作为jQuery library 的粉丝（呵呵），这是我的解决方案。

CSS

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

使用 jQuery 的 JavaScript

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

one 事件将处理程序附加到元素的事件。每个元素最多执行处理程序一次。

演示

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

【讨论】：

【解决方案4】：

这必须用 JavaScript 完成，使用 jquery 你可以像这样永久添加样式：

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

【讨论】：

我支持这个。不要害怕尝试使用 javascript，因为你不习惯它。不尝试就无法学习 :) 在这种情况下，CSS 无法满足您的需求。 developer.mozilla.org/en/learn/javascript

【解决方案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 改为 .hover(Class Name)

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

【讨论】：

但这将毫无意义地在鼠标移入和移出时执行eventHandler。我认为 OP 应该宁愿 .one( events [, data ], handler(eventObject) ) api.jquery.com/one （即使他要求仅使用 css 的解决方案）

【解决方案7】：

当依赖纯 CSS 时，我认为用 :hover 不可能做到这一点。如果你坚持使用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>

复选框使您能够单击它离开。如果您不想这样，请检查无线电的输入类型。

【讨论】：

【解决方案8】：

显然可以使用 CSS 动画，但有无限延迟来处理这个问题。在这里看到一篇文章... http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/

【讨论】：

【解决方案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;
}

转换功能的第二个数字/条目用作释放功能。实际上，您的悬停过渡将发生并且不会恢复正常，直到在第二个条目中引用的时间段之后（过渡：600ms 3s；-此示例表示您的鼠标实际上不会在元素上悬停 3s )。

希望这会有所帮助。

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;
}

【讨论】：

【解决方案11】：

这是一个 jquery 解决方案，它悬停在二级菜单项上并持续显示子级三级，直到您将鼠标悬停在另一个二级菜单项上。

 $("ul.second > li.dropdown").hover(function() {
    // remove the show class if it exists
    $('ul.third').removeClass('show');
    // add the show class only to this child
    $(this).find('.third').addClass('show');
  });

【讨论】：