在另一个元素上缩放 CSS3 <li>

Question

你好，我的问题很简单，我有多个 li 元素，里面有图像和文本，但问题是当我应用此代码在悬停时缩放它：

.thumb > li a {
    border-width: 1px;
    border-style: solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-color: #E5E6E9 #DFE0E4 #D0D1D5;
    display: block;
    margin: 2px;
    position: relative;
    transition: all 0.3s ease 0s;
}

.thumb > li a:hover {
    border-color: #00C0FF;
    box-shadow: 0px 0px 7px #00C0FF;
    text-decoration: none;
    outline: medium none;
    transition: all 0.3s ease 0s;
    transform: scale(1.1);
}

它覆盖了之前的 li 元素，所以一些边框无法正确显示，所以我想知道是否可以更正它。

谢谢。

Answer 1

将此添加到.thumb>li a:hover（背景变得不透明）：

.thumb > li a:hover{
    background-color: white;
    z-index: 1;
}

fiddle here.

在另一个元素上缩放 CSS3 <li>

Zoom CSS3 <li> element over another

css

html-lists

css-transitions