Question

我有隐藏的div，我希望在悬停时出现并保持原样。

＆＃13;

#content {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

#content:hover {
  opacity: 1;
}

＆＃13;

<div id="content">
  TEXT
</div>

＆＃13;

Answer 1

您可以使用jQuery hover()

＆＃13;

$('#content').hover(
  function() {
    $(this).addClass('show');
  }
);

＆＃13;

#content {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

#content.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  TEXT
</div>

＆＃13;

Answer 2

$(document).ready(function() {
  $('#div').on('mouseenter', function() {
    $(this).css('opacity', '1');
  });
});

#div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  TEXT
</div>

Answer 3

您可以使用jQuery代替CSS，如下面的代码段addClass。但是您必须将!important添加到opacity: 1值，如图所示，以覆盖初始设置。

＆＃13;

$(document).ready(function() {
  $('#content').mouseenter(function() {
    $("#content").addClass("seeme");
  });
});

＆＃13;

#content {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

.seeme {
  opacity: 1 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  TEXT
</div>

＆＃13;

Answer 4

虽然css不允许您永久更改元素的属性，但javascript会。更具体地说，让我们尝试使用jquery库。

在您的索引中包括：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

在你的脚本中尝试：

$(#content).onmouseover().css("background-color","red");

或替换您需要的任何属性或元素。

Answer 5

这里不需要任何JavaScript;只需将元素的transition-delay属性设置为一个永远不会（通常）满足的非常高的时间，然后将其重置为0s上的:hover。

#content {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s 36000s; /*10 hours!*/
    opacity: 0;
}
#content:hover {
    opacity: 1;
    transition-delay:0s;
}

隐藏的div和逗留在悬停后出现

5 个答案: