Question

我只是设法围绕父母/孩子的悬停行动（主要是），但我遇到了这个问题。

我在子元素（h3.test）中有一个箭头，我希望在父元素悬停时显示（category-links）。问题是箭头在（img.art-icons）元素后面显示。我知道我可能会在这里做一些迟钝的事情，但有人可以为我解释一下吗？

这是小提琴http://jsfiddle.net/plaedien/mN7mZ/

CSS

.button {
    width: 225px;
    margin: 0 auto;
}

a.category-links{
    display: block;
    position: relative;
    border: 1px solid #F0F5F5;
}

h3.test{
    padding-top: 11px;
    padding-bottom: 11px;
    background-color: #cbcbcb;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-size: 23px;
    font-weight: 600;
    text-align: center;
    list-style-type: none;
}

a.category-links:hover h3.test{
    background: url(http://kmmedia.com.au/~~test/images/yellow-arrow.png) #b61f25 center 45px no-repeat;
    position: relative;
    color: #fff;
    z-index: 100;
}   

.art-icons {
    display: block;
    margin: 30px auto;
    z-index: 1;
}

.category-text {
    font-family:'Source Sans Pro', sans-serif;
    color: #4d4d4d;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
}

HTML

<div class="button">
    <a class="category-links">
        <h3 class="test">Hapkido</h3>
        <img class="art-icons" src="http://kmmedia.com.au/~~test/images/hapkido-icon.png" alt="pic">    
        <div class="category-text">Do you want to learn practical<br>self-defence skills?  Then Hapkido is the martial art for you!</div>
    </a>
</div>

Answer 1

问题是图像相对设置为背景，它只会根据实际h3 div的高度显示，即23px，因此也就是截止。将以下内容添加到h3：hover。

h3:hover {
  height: 40px;
}

这个小提琴会告诉你我的意思http://jsfiddle.net/mN7mZ/5/

Answer 2

我只会增加padding-bottom上的h3.test以提供足够的空间让您的箭头显示，我还增加了padding-top以便比率看起来不错：

h3.test{
    padding-top: 13px;
    padding-bottom: 18px;
}

这是JSFiddle。

Answer 3

将中心值减少到38px：

 a.category-links:hover h3.test{
background: url(http://kmmedia.com.au/~~test/images/yellow-arrow.png) #b61f25 center 45px no-repeat;
position: relative;
color: #fff;
z-index: 100;
}

Answer 4

将填充顶部和底部值增加到15px ......它可以正常工作

DEMO

<强> CSS：

h3.test {
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #cbcbcb;
    font-family:'Source Sans Pro', sans-serif;
    color: white;
    font-size: 23px;
    font-weight: 600;
    text-align: center;
    list-style-type: none;
    z-index: 9;
}

Answer 5

你的箭头不在后面 - 这是因为你把它设置为背景并将其移动了45px所以你的h3不够高以显示它，这就是为什么它在h3的底部被切断< / p>

如果您想要解决问题，可以尝试将h3更改为：

<h3 class="test"><span class="arrow"></span>Hapkido</h3>

然后使用以下样式：

a.category-links:hover h3 {
    background:#b61f25;
}
a.category-links:hover .arrow {
    background: url(http://kmmedia.com.au/~~test/images/yellow-arrow.png) center top no-repeat;
    position: absolute;
    color: #fff;
    z-index: 100;
    display@:block;
    width:23px;
    height:12px;
    top:45px;
    left:50%;
    margin-left:-12px;
}

Example

Or to show the arrow underneath the h3

Answer 6

    h3.test{
padding-top: 11px;
padding-bottom: 18px;
background-color: #cbcbcb;
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-size: 23px;
font-weight: 600;
text-align: center;
list-style-type: none;
}

a.category-links:hover h3.test{
background: url(http://kmmedia.com.au/~~test/images/yellow-arrow.png) #b61f25 no-repeat;
position: relative;
color: #fff;
z-index: 9999;
background-position:50% 43px;
padding-top: 11px;
padding-bottom: 18px;
}

出现在img背后的儿童元素

6 个答案: