Html 在“取消悬停”后保持 CSS 悬停状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17100235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make CSS Hover state remain after "unhovering"
提问by Rowan K.
I'm facing a small issue that I've never really had to deal with before. I'm a beginner web designer, and I recently used the CSS hover feature on a div on my webpage. Another image is revealed when one hovers over this div; however, the new image disappears when you "unhover", and I would like it to stay visible.
我正面临一个我以前从未真正处理过的小问题。我是一名初级网页设计师，最近我在网页的 div 上使用了 CSS 悬停功能。将鼠标悬停在此 div 上时会显示另一张图像；但是，当您“悬停”时，新图像会消失，我希望它保持可见。
Here is an example of the code that I am using:
这是我正在使用的代码示例：
#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;
}
Is there any way to solve this using just CSS? I haven't used any javascript thus far and I'm not very comfortable with it.
有没有办法只使用 CSS 来解决这个问题？到目前为止，我还没有使用过任何 javascript，我对它不是很满意。
Either way, any solutions will be gladly accepted! Thanks so much.
无论哪种方式，我们都会很乐意接受任何解决方案！非常感谢。
回答by G-Cyrillus
Here i go with my CSS idea.
在这里，我提出了我的 CSS 想法。
You may use transition-delay; http://jsfiddle.net/nAg7W/
您可以使用转换延迟； 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;
}
markup:
标记：
<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" />
it could be possible as well, to click, so it fades away. http://jsfiddle.net/nAg7W/1/
也有可能点击，所以它会消失。 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);
}
回答by morewry
As @Leo Pflugindicates, you can do this with some confidence in CSS and HTML on and after clickby using the techniques detailed here http://cssconf.com/talk-seddon.html.
正如@Leo Pflug 所指出的那样，您可以使用http://cssconf.com/talk-seddon.html 中详述的技术在点击时和点击后对CSS 和 HTML充满信心地做到这一点。
With a dash of JavaScript, it's possible and simple and reliable, as shown by @Wind Shear.
如@Wind Shear所示，使用少量JavaScript 即可实现，而且简单可靠。
Pure CSS on and after hover, however, is a lot more difficult and, depending on what browsers you need to support, not possible in a currently production-viable way. The problem is that anything you change with the :hover pseudo-class selector will not (and/or should not) match elements over which you are no longer hovering.
然而，在 hover 和之后的纯 CSS要困难得多，并且取决于您需要支持的浏览器，在当前生产可行的方式中是不可能的。问题是您使用 :hover 伪类选择器更改的任何内容都不会（和/或不应该）匹配您不再悬停的元素。
The only way you are likely to be able to do this with pure CSS is with CSS3 Animations. To that end, I have created a demo http://cdpn.io/GLjpK(v2 w/FF & IE) that uses CSS animations to swap to a hover state on hover and then persist that state until the page is reloaded.
使用纯 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;
}
I tested in it Chrome latest, Firefox latest, and IE 10. Worked in all three.
我在最新版本的 Chrome、最新版本的 Firefox 和 IE 10 中进行了测试。这三个版本都适用。
Note I had some trouble with codepen not displaying the latest saved code, so I created a fresh one here http://cdpn.io/GLjpK.
注意我在 codepen 不显示最新保存的代码时遇到了一些麻烦，所以我在这里创建了一个新的http://cdpn.io/GLjpK。
See Stop a CSS3 Animation at the last frame of the iteration-countand Stopping a CSS3 Animation on last framefor what/why/how.
见车站有CSS3动画在迭代计数的最后一帧和最后一帧上停止一个CSS3动画什么/为什么/如何。
UPDATE: Lea Verou has now also demonstrated this techniquein her post Smooth state animations with animation-play-state
更新：Lea Verou 现在也在她的文章Smooth state animations with animation-play-state 中展示了这种技术
回答by Jaime Gris
You can't permanently stay as hover state using CSS as it merely defines the rules on styling the tags, classes, IDs, pseudo-classes, and states. So unfortunately, you need Javascript to solve the problem.
您不能使用 CSS 永久保持悬停状态，因为它仅定义了样式标签、类、ID、伪类和状态的规则。所以不幸的是，你需要 Javascript 来解决这个问题。
Being a fan of jQuery library(hehehe), here is my solution.
作为jQuery 库的粉丝（呵呵），这是我的解决方案。
CSS
CSS
ul li ul {
display: none;
}
ul li.permahover ul {
display: block;
}
Javascript using jQuery
使用 jQuery 的 JavaScript
$("#onabout").one("mouseover", function() {
$("#onabout").addClass('permahover');
});
The oneevent attaches a handler to an event for the elements. The handler is executed at most onceper element.
该one事件将处理程序附加到元素的事件。每个元素最多执行一次处理程序。
Demo
演示
回答by Xedret
It will have to be done with JavaScript, using jquery you can permanently add the style like this:
它必须使用 JavaScript 完成，使用 jquery 您可以永久添加如下样式：
$(#onabout).onmouseover().css("display","block");
回答by ScottS
Some Pure CSS Ideas
一些纯粹的 CSS 想法
I'm not quite sure what you intend by "stay visible." Here are some differing thoughts based off your possible purposes, but each has possible side effects not intended. The only purely permanent solution is going to be through javascript (as others have noted).
我不太确定你所说的“保持可见”是什么意思。根据您可能的目的，这里有一些不同的想法，但每个想法都有可能无意的副作用。唯一的永久解决方案是通过 javascript（正如其他人所指出的）。
Longer 'Stay' But Still Not Permanent
更长的“停留”但仍然不是永久的
If you mean stay visible as long as one might also be hovering over the revealed image itself, then a simple change in your code will work:
如果您的意思是只要有人还悬停在显示的图像本身上就保持可见，那么对您的代码进行简单的更改即可：
#about:hover #onabout,
#onabout:hover {
display: block;
}
Permanent 'Stay'
永久“停留”
If you wrap your #onaboutin a position: fixedwrapper that is also revealed on hover, and set that wrapper to fix to the top, right, bottom, and left of the screen, then use that wrapper's :hoverto keep the #onaboutit will stay permanently. But it is also going to be in a fixed position relation, and other hover events or clicks may be prevented. That is likely not desirable, but again, I don't know your specific application, so it is possible that the idea would work for you. You would actually set the display: blockas default on the #onaboutand hide it through the wrapper. Code for the wrapper and the hover would be something like:
如果您将您#onabout的position: 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;
}
Since the #onaboutis in the #permaHoverWrapin this solution, it becomes visible through the display of the fixed wrapper, and then stays that way through the guaranteed hover of that wrapper. Again, the side effects of this solution could be too severe except under the right circumstances. However, as a proof of concept, it can be done purely through CSS.
由于#onabout是在#permaHoverWrap该溶液中，它通过固定包装的显示变得可见，然后保持这种方式通过该包装物的保证悬停。同样，除非在正确的情况下，否则此解决方案的副作用可能太严重。但是，作为概念证明，它可以完全通过 CSS 来完成。
回答by Leo Pflug
I don't think that there is any possibility to do this with :hover, when relying on pure css. If you insist on using css, you might change it to clicking. So that when the user clicks on the div, the other one gets shown permanently. Like this:
我认为在依赖纯 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>
checkbox makes you able to click it away. if you don't want that check the input type to radio.
复选框使您能够单击它。如果你不想检查收音机的输入类型。
回答by iKamy
the best solution is adding or removing classes to an element like this(done with JQUERY)
最好的解决方案是向这样的元素添加或删除类（使用 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;
}
notice that I chang :hover to .hover(Class Name)
请注意，我将 :hover 更改为 .hover(Class Name)
$("#about").hover(function(){
$(this).addClass("hover");
});
回答by Kenneth M. Kolano
One can apparently use CSS animation, with an infinite delay to handle this. See an article here... http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/
显然可以使用 CSS 动画，并有无限延迟来处理这个问题。在这里看到一篇文章... http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/
回答by Krayz
Just happened to come across the answer to your question. See example css below:
刚好碰到你问题的答案。请参阅下面的示例 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;
}
the second number/entry on the transition feature acts as a release function. In effect, your hover transition(s) will take place and not revert back to normal until after the period of time quoted in the second entry (transition: 600ms 3s; - This example would represent your mouse virtually not hovering off the element for 3s).
过渡特征上的第二个数字/条目充当释放功能。实际上，您的悬停转换将发生，并且在第二个条目中引用的时间段之后才会恢复正常（转换：600 毫秒 3 秒；-此示例表示您的鼠标实际上没有在元素上悬停 3 秒）。
Hope this helps.
希望这可以帮助。
K.P.U
KPU
回答by Jesse Seaver
You do NOT need Javascript as many in this thread suggest. Here's how to do it with CSS alone:
您不需要本线程中建议的 Javascript。以下是单独使用 CSS 的方法：
(You need to use visibility instead of display)
（您需要使用可见性而不是显示）
.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;
}
