个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试制作一个显示在另一个 div 的 .hover 上的 div，然后将显示在 .hover 上的 div 向下移动到悬停的 div 下方。这部分工作正常，但文本位于悬停的 div 下方。
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="interface.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<head>
<div id="elementID">
<div id="woodenPickaxe">
<a class='craftWoodenPickaxe' href='#'>
<span class='craftingButton'>Craft Wooden Pickaxe</span>
<div id="woodenPickaxePopup"> Cost 50 wood </div>
</a>
</div>
</div>
脚本
$(function(){
$("#woodenPickaxe").hover(function() {
$("#woodenPickaxePopup").toggle();
});
CSS
#elementID{
height: 500px;
width: 500px;
background: green;
padding-top: 100px;
}
#woodenPickaxePopup{
height: 50px;
width: 158px;
background: white;
display: none;
position: relative;
top: 50px;
}
.craftingButton {
background-color:#FFFFFF;
border:1px solid #dcdcdc;
display:inline-block;
color:#616161;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:48px;
line-height:50px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
float: left;
}
.craftingButton:active {
position:relative;
background: #ffffff;
border: solid;
border-width: 1px;
border-color: #ffffff;
top:1px;
}
.craftingButton:hover {
background-color:#F2F2F2;
}
padding-top: 100px;
}
.craftingButton {
background-color:#FFFFFF;
border:1px solid #dcdcdc;
display:inline-block;
color:#616161;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:48px;
line-height:50px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
float: left;
}
.craftingButton:active {
position:relative;
background: #ffffff;
border: solid;
border-width: 1px;
border-color: #ffffff;
top:1px;
}
.craftingButton:hover {
background-color:#F2F2F2;
}
如您所见，悬停效果很好，所有 div 都可以正常工作，除了我的 woodenPickaxePopup div 中的文本，它位于 div 应该位于的下方。
编辑:我为我使用的脏话道歉，当我昨晚制作那个 jsfiddle 时我忘记了它并且因为我无法解决这个问题而感到沮丧。
最佳答案
您使用 javascript 来显示 woodenPickaxePopup div 是否有原因？您可以在没有 javascript 的情况下实现同样的事情。
这是一个工作更新: http://jsfiddle.net/RBJ9R/1600/
变化的部分:
#woodenPickaxePopup{
height: 50px;
width: 158px;
background: white;
display: none;
position: absolute; // changed to absolute
top: 50px;
}
// added this
.craftWoodenPickaxe {
position: relative;
}
// added this
.craftWoodenPickaxe:hover #woodenPickaxePopup {
display: block;
}
关于javascript - 如何对齐文本以适应使用 Top : 50px; 向下移动的 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29684218/
24
4
0
我有一个最大堆和一个最小堆，其中最大堆的最大元素小于或等于最小堆的最小元素。 我现在想移动最小堆的最小元素成为最大堆的最大元素。 一种方法是弹出最小堆的顶部元素并将其插入最大堆。 有没有更有效的方法来
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 3 年前。 Improve
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit th
我遇到过几篇(机器学习分类问题)期刊论文提到使用 Top-N 方法评估准确性。数据显示，在相同的训练、测试条件下，Top 1 准确率 = 42.5%，Top-5 准确率 = 72.5%。请问这个top
我是 js 和 vue 的初学者，我正在建立一个网站来自动化我的比萨店交付订单。 我有一个 v-for 浇头列表，客户可以从列表中最多选择 4 个浇头，他可以选择 2、3 或 4 次相同的浇头。 我为
Kubernetes top (kubectl top) 命令显示的内存使用情况与在 pod 内运行的 Linux top 命令不同。 我创建了 k8s 部署，其中 YAML 包含以下内存限制: re
linear-gradient() 的浏览器实现已经发展到支持 top 和 to top 作为 anchor 值。它们是同向还是相反？ 最佳答案 它们相反。 to top 在元素底部使用第一个颜色参数
我有一个 HTML 对象: 1:1 但出于某种原因...当我通过以下代码在 jQuery 中访问它的 top 属性时: $tile = $('[data-x=1][data-y=1]');
这是我关于 stackoverflow 的第一个问题，如果我没有做对所有事情，请多多包涵。如果我可以更好地格式化它，请告诉我。 我正在完成 TOP 2nd CSS Margin/Padding 练习。
我正在尝试使我的登录页面与 css 保持一致。但是，我在两个属性 margin-top 和 top 之间遇到了问题。 margin-top倾向于根据第一个元素推送登录页面，而top只是登录页面的位置。
我正在构建一个 jQuery 表单字段验证器，目前我正致力于在 CSS 中构建弹出通知。 问题是，无论 margin 的应用如何，我都无法让 .notification-point 与 .notifi
假设我们有 3 个方法:方法 2 从方法 1 调用，方法 3 从方法 2 调用。方法 2 和 3 的大小均为 30 个字节码。此外，为了确定性，假设方法 2 总是从方法 1 调用一次，而方法 3 总是
我有几千条记录，我需要分批更新它们，每批更新 350 条记录。 我想知道以下两个更新语句是否有任何区别，其中一个是否会运行得更快，使用更少的数据库资源等。 语句1: UPDATE TOP (350)
目前我正在为一个元素开发一个 PSD 设计，在那个设计中，一个部分有一个完全不同的形状来吸引人的外观。 为了创建该形状，我创建了一个 svg 文件并将其用作背景并通过 absolute 属性定位该部分
我有 sticky-top 类的元素侧边栏和 div: .... 当侧边栏是粘性的时候，我需要传递一个边距，因为 sticky-t
我不希望他们处于同一水平。它们都是独立的div。侧边栏是固定的。为什么侧边栏不粘在顶部而不是与文章 div 对齐？ body{ margin: 0; padding: 0; } div
似乎最好只为顶级函数创建一次 FunPtr，而不是在需要时创建一个新的函数(同一函数)并处理其释放。 除了 foreign import ccall "wrapper" 之外，我是否忽略了获取 Fun
希望得到一些指点，我有一个问题:我需要向具有 Clusterrole:view 的用户添加什么角色/权限才能让该用户在 kubectl 中使用“top node”和“top pod”命令？我们在 1.
我的情况非常简单: 我有一个名为 FullTextPagina 的表值函数，定义如下: select * from Pagina as p where contains(p.PageText, @te
这个问题已经有答案了: Use variable with TOP in select statement in SQL Server without making it dynamic [dupli
我是一名优秀的程序员,十分优秀！