39

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

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

4

11 回答 11

46

在这里，我提出了我的 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);
}
于 2013-06-14T04:58:20.693 回答
25

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

正如@Wind Shear所展示的，使用少量的JavaScript是可能的、简单可靠的。

然而，在 hover 上和之后的纯 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。

请参阅在迭代计数的最后一帧停止 CSS3 动画和在最后一帧停止 CSS3 动画了解什么/为什么/如何。

更新：Lea Verou 现在也在她的文章Smooth state animations with animation-play-state中演示了这种技术

于 2013-11-13T19:28:55.317 回答
13

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

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

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/

于 2013-06-14T02:44:31.630 回答
6

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

$(#onabout).onmouseover().css("display","block");
于 2013-06-14T02:38:40.590 回答
4

一些纯 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 来完成。

于 2013-06-14T04:13:28.967 回答
1

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

于 2013-11-24T03:05:05.057 回答
1

最好的解决方案是向这样的元素添加或删除类（使用 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");
});
于 2013-06-14T03:06:21.660 回答
1

当依赖纯 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>

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

于 2013-11-12T14:15:11.050 回答
1

刚好遇到你问题的答案。请参阅下面的示例 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 ）。

希望这可以帮助。

KPU

于 2017-02-05T02:27:17.860 回答
0

这是一个 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');
  });
于 2021-12-14T22:05:56.973 回答
0

您不需要此线程中建议的 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;
}
于 2019-06-05T20:38:49.530 回答