我有一个菜单,包含一个无序列表,样式看起来像一个网格,网格框在鼠标悬停在上面时会改变颜色。干净利落。我的问题是当我添加一个链接到li里面的文本时,悬停基本上就会中断。 (请参阅下面的小提琴以供参考,以及链接和非链接之间的悬停方式如何不同li)HTML列表样式链接
我需要将链接样式设置为与悬停在网格上时的无风格文本相同的样式,而不仅仅是实际的链接并使整个网格框区域可点击。
我一直在搞它一段时间,但不能让它按我想要的方式工作。
.admin-panel {
overflow: hidden;
li {
float: left;
width: 33%;
height: 115px;
padding: 10px;
line-height: 1.4;
text-align: center;
background-color: #f9f9f9;
border: 1px solid #fff;
}
li:hover, li a:hover {
color: #fff;
background-color: #778ba1;
}
.glyphicon {
margin-top: 5px;
margin-bottom: 10px;
font-size: 24px;
}
.admin-panel-class {
display: block;
text-align: center;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
}
+0
是[这](HTTPS: //jsfiddle.net/DTcHh/15128/)你需要什么? –
+0
在你的例子中的悬停很好,谢谢,现在唯一的办法是使整个网格框区域可点击而不是仅可点击文本 –
+0
但你的''''有10px的填充。可以单独使用10px以外的空间吗?否则,我们可能不得不使用绝对定位。 –