Html 使CSS悬停状态保持在“后”；“解除控制”；

我面临着一个我以前从未真正处理过的小问题。我是一个初学者网页设计师，最近我在我的网页上的一个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，我对它不是很满意

---

无论如何，任何解决方案都会被欣然接受！非常感谢。

必须使用JavaScript完成，使用jquery可以永久添加如下样式：

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

---

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

作为（呵呵）的粉丝，以下是我的解决方案

CSS 使用jQuery的Javascript

one

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

演示

---

最好的解决方案是向这样的元素添加或删除类（使用JQUERY完成）

请注意，I change:hover to.hover（类名）

一些纯粹的CSS想法 我不太确定你“保持可见”的目的是什么。以下是一些基于你可能的目的的不同想法，但每种想法都有可能产生意想不到的副作用。唯一纯粹永久的解决方案是通过javascript（正如其他人所指出的）

停留时间更长，但仍然不是永久性的

如果您的意思是只要一个人可能还在显示的图像上悬停，就保持可见，那么代码中的一个简单更改将起作用：

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

永久“停留”

如果将您的

#onabout

包装在一个

位置：fixed

包装，该包装也显示在hover上，并将该包装设置为固定在屏幕的顶部、右侧、底部和左侧，然后使用该包装的

：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来完成。

这里我同意我的CSS想法

您可以使用转换延迟；

标记：

---

我认为在依赖纯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>

奥纳布特先生
{
显示：无；
}
输入#激活
{
显示：无；
}
输入#激活：选中+.onabout
{
显示：块；
}
点击我
复选框：选中为真或单选按钮：选中为真时可见

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

如@所示，您可以使用此处详细介绍的技术，在单击前后对CSS和HTML充满信心地执行此操作

使用少量的JavaScript，它是可能的、简单可靠的，如@所示

但是，在悬停前后使用纯CSS要困难得多，而且根据您需要支持的浏览器的不同，以目前生产可行的方式是不可能的。问题是，使用：hover伪类选择器更改的任何内容都不会（和/或不应该）与不再悬停的元素匹配

使用纯CSS可以做到这一点的唯一方法是使用CSS3动画。为此，我创建了一个演示（v2 w/FF&IE），它使用CSS动画在hover上切换到悬停状态，然后保持该状态，直到重新加载页面

@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没有显示最新保存的代码时遇到了一些问题，因此我在这里创建了一个新代码

查看和了解什么/为什么/如何

---

更新：Lea Verou现在也在她的帖子中演示了这项技术

显然可以使用CSS动画，并有无限的延迟来处理。在这里看到一篇文章。。。

---

碰巧找到了你问题的答案。请参见下面的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

您不需要像此线程中许多人建议的那样使用Javascript。下面介绍了如何单独使用CSS：

（您需要使用可见性而不是显示）

---

我支持这个。不要因为不习惯使用javascript而害怕尝试使用它。不尝试就无法学习：）在这种情况下，CSS不能做你想做的事情。在本例中，鼠标离开其div区域后，图像仍保留在屏幕3MNS上。几乎是一个永恒，你可以缩短或延长：）但这将毫无意义地执行

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

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

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" />

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

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

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

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

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