个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试做一个简单的 html/css 悬停设计测试。我在列表中有五个链接，它们是内联的。当鼠标在链接上滚动时，我想要一个列的效果，该列会拉伸(stretch)页面的长度。因此，例如，如果我的鼠标悬停在第一个链接 1399 上，则 1499 的文本在 1399 链接上显示为双图像。或者例如下图中未显示 1699。那行得通，但主要是。 (我希望有一种方法可以使悬停列位于文档正文中其他元素的后面，我认为不可能将 z 属性赋予悬停)...我注意到它使文本来自下一个链接从它所在的顺序中消失，鼠标覆盖的链接上有双图像。
这是html
<div id = box1>
<ul id=list1>
<li><a href>1399 </a></li>
<li><a href>1499 </a></li>
<li><a href>1599 </a></li>
<li><a href>1699 </a></li>
<li><a href>1799 </a></li>
<li><a href>1899 </a></li>
</ul>
</div>
这是CSS
a:link {
text-decoration:none;
color:#fff;
}
a:hover
{
color:#fff;
position:absolute;
background-color:blue;
opacity:0.5;
min-height:100%;
max-width: 70px;
//z-index: 1;
//top:0;
//left:0;
//right:0;
//bottom:0;
}
最佳答案
发生的事情是你的 position: absolute正在服用<a>流出(这就是为什么 1799 移到它原来的位置)，并且 1699 本身被推离屏幕，因为你的 min-height: 100%导致它成为<a>屏幕高度的 100%，但 <a>从屏幕高度顶部以下开始。我想你可以通过更换你的 hover 来达到你想要的效果代码:
a:hover {
color:#fff;
}
a:hover:after
{
content: '';
display: block;
position:absolute;
background-color:blue;
opacity:0.5;
max-width: 70px;
z-index: -1;
top:0;
bottom:0;
}
唯一的问题是，我现在无法对此进行测试以查看 after伪元素可以与 hover 组合伪类。如果没有，那么我建议通过创建一个 <div> 来使用相同的想法。在<a>里面标签成为栏目效果。
编辑(基于您提供的代码)
HTML
<body>
<div id="wrapper">
<div id="menu_wrapper">
<div id="menu">
<ul
<li><a href>1399</a></li>
<li><a href>1499</a></li>
<li><a href>1599</a></li>
<li><a href>1699</a></li>
<li><a href>1799</a></li>
<li><a href>1899</a></li>
<li><a href>1999</a></li>
<li><a href>2999</a></li>
</ul>
</div>
</div>
<div id="content">
<p>Ullamco laboris nisi ut labore et dolore magna aliqua. Ut enim ad minim veniam,
excepteur sint occaecat eu fugiat nulla pariatur. Quis nostrud exercitation
duis aute irure dolor lorem ipsum dolor sit amet.</p>
<p>Sed do eiusmod tempor incididunt in reprehenderit in voluptate ut enim ad
minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Excepteur sint
occaecat quis nostrud exercitation mollit anim id est laborum. Lorem ipsum
dolor sit amet.</p>
<p>Duis aute irure dolor eu fugiat nulla pariatur. Consectetur adipisicing elit,
sunt in culpa in reprehenderit in voluptate. Ullamco laboris nisi sed do eiusmod
tempor incididunt qui officia deserunt. Duis aute irure dolor cupidatat non
proident, velit esse cillum dolore. Ut enim ad minim veniam, lorem ipsum dolor
sit amet, excepteur sint occaecat.</p>
<img src="../images/myimage.png" alt="" />
</div>
</div>
</body>
CSS
html, body {height: 100%; background-color: #F0F095; }
#menu_wrapper {width:900px; margin: 0 auto; height:150px;
background-color:#CC3300;border: 4px solid #000;}
#menu{margin:15px;border: 4px solid #000; height:25px;}
#menu ul{}
#menu ul, #menu li {list-style-type:none; margin:0; padding:0; text-indent:0;}
#menu ul li{ width:70px; float:left; }
#menu ul li:hover:after {content: ''; position:absolute;min-height:100%;width:70px; background-color:yellow; z-index:0; margin-left: -70px; opacity: .5}
a{width:100%; line-height: 25px; position: relative; z-index: 1;
text-align:center; float: left;
}
#wrapper {min-height:100%; background-color:#F1CA49; width: 1000px; margin: 25px auto;}
关于css - :hover is making the next link inline disappear and double images it over the link the mouse is on，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8043456/
24
4
0
看看这个 fiddle http://jsfiddle.net/9S4zc/2/ 为什么这在 firefox 和 chrome 中看起来不同(文本对齐方式不同) 如何让 inner:before 元素
我从文档中了解到的是 %{ %} 之间的内容。被插入到包装器中，%inline %{ %} 呢？ ? 是一样的吗？如果不是，有什么区别？ 也许我们可以找到很多%inline %{ %}的出现。但仅出现
当我使用 显示:inline-flex； 或 显示:内联网格； 似乎有一些额外的“空间”或某种额外的重点计算发生。我不确定到底发生了什么。当使用箭头键在 contentediatble div 中导航
如果我想让一个 div 与容器 div 的其他内联元素内联，而我的目的仅此而已，我应该更喜欢使用 inline-block 或 display property 还是 inline-flex？不能使用
这个问题在这里已经有了答案: Why does an inline-block align to top if it has no content? (2 个答案) 关闭 8 年前。
Ada 信息交换所 states the following : The use of pragma Inline does have its disadvantages. It can create
Name
我问这个基本问题是为了让记录更正。已转介 this question和 its currently accepted answer ，这没有说服力。然而second most voted answer
你好， 在管理面板中，我创建了用于添加产品的表单。表单包括 2 个内联表单集，因为有一些与产品相关的模型。用户可以创建产品，然后定义该产品的不同属性的变体。我将举例说明这一点。用户拥有一个品牌的 3
有很多关于 inline 的使用以及如何正确执行此操作以达到所需目的的信息，例如此处(我目前将其用作引用)Inline Functions in C . 当我尝试实现页面中指定的内容时，出现编译器错误
我正在编写 gtk 代码。我经常有不需要闭包的简短回调，因为它们传递了它们需要的所有参数。例如，我在创建一些 gtk.TreeViewColumns 时将其置于循环中: def widthChange
这个问题在这里已经有了答案: What is the difference between display: inline and display: inline-block? (7 个答案) 关闭
我已经搜索了很长时间来找到答案，但是我没有找到解决方案... 我制作了一个无序列表的链接，并将它们放在标题下，就像导航栏一样。然而，在 IE 中(是的那个恶魔..)我的链接似乎没有对齐到中间。下面是我
我想将两张 table 并排放置。由于我不是 floating 或使用“css hacks”的忠实拥护者，您有什么建议？没有它是否可以解决，还是我运气不好？ 最佳答案 使用 table-cell显示以
这个问题在这里已经有了答案: Why is this inline-block element pushed downward? (8 个答案) 关闭 6 年前。
CSS display 的 inline 和 inline-block 值到底有什么区别？ 最佳答案 视觉答案 想象一个 中的元素.如果你给 例如，元素高度为 100px 和红色边框，它看起来像这
我想使用 /纯 CSS 弹出窗口的标签，但是 表现为内联 block ，我无法将其更改为内联。 有没有办法强制表现得像 display:inline 而不是 inline-block？
我的想法是这是不可能的，或者我缺少一个额外的步骤。无论哪种方式，我都被卡住了，无法弄清楚。 使用内联模板的原因是能够使用 Laravel Blade 语法并结合 Vue Js 的强大功能。似乎是两者中
http://christianselig.com/wp/ 对于主导航，如果我使用 display: inline，它们将显示为 block 。我心血来潮添加了 display: inline-blo
Firefox 的 -moz-inline-box 和 -moz-inline-stack 专有显示值有什么区别？ 最佳答案 https://developer.mozilla.org/en/CSS/
我是一名优秀的程序员,十分优秀！