草庐IT

javascript - 悬停在同一位置时显示 div

coder 2023-08-05 原文

我试图在鼠标悬停时显示 div，但它在闪烁，我该如何显示/隐藏而不会出现任何抖动并平滑过渡？

我也尝试过使用 jquery 淡入/淡出，但仍然闪烁。

这是代码

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back {
	opacity: 1;
	visibility: visible;
}
<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
</div>

最佳答案

它闪烁是因为每次 .back 变得可见时，悬停在 .front 上不再有效。要解决此问题，您可以将 .back 的可见性设置为在 .back:hover 上可见，这可以通过对 .back:hover 使用与 .front:hover + .back

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back,
.back:hover {
	opacity: 1;
	visibility: visible;
}
<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is back div</div>
  </div>
</div>

关于javascript - 悬停在同一位置时显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46039815/

时显javascriptdivclasssectionhtmlcsscss-transitions

有关javascript - 悬停在同一位置时显示 div的更多相关文章

  1. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

  2. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  3. ruby - Rails 关联 - 同一个类的多个 has_one 关系 - 2

    我的问题的一个例子是体育游戏。一场体育比赛有两支球队，一支主队和一支客队。我的事件记录模型如下:classTeam"Team"has_one:away_team,:class_name=>"Team"end我希望能够通过游戏访问一个团队，例如:Game.find(1).home_team但我收到一个单元化常量错误:Game::team。谁能告诉我我做错了什么？谢谢， 最佳答案 如果Gamehas_one:team那么Rails假设您的teams表有一个game_id列。不过，您想要的是games表有一个team_id列，在这种情况下

  4. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

  5. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  8. ruby - 在 Ruby 中，为什么 Array.new(size, object) 创建一个由对同一对象的多个引用组成的数组？ - 2

    如thisanswer中所述,Array.new(size,object)创建一个数组，其中size引用相同的object。hash=Hash.newa=Array.new(2,hash)a[0]['cat']='feline'a#=>[{"cat"=>"feline"},{"cat"=>"feline"}]a[1]['cat']='Felix'a#=>[{"cat"=>"Felix"},{"cat"=>"Felix"}]为什么Ruby会这样做，而不是对object进行dup或clone？ 最佳答案 因为那是thedocumenta

  9. ruby - Heroku production.log 文件位置 - 2

    我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc

  10. ruby - 在 Ruby 中查找多个正则表达式匹配的模式和位置 - 2

    这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo

随机推荐