兒童元素出現在img

我只是設法圍繞父母/孩子懸停行動（主要），但我遇到了這個問題。兒童元素出現在img

我在父元素（category-links）的懸停上顯示的子元素（h3.test）中有一個箭頭。問題在於箭頭出現在（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>

來源

2014-07-09 Plaedien

你的arro w沒有落後 - 這是因爲你已經將它設置爲背景並將其向下移動45px，所以你的h3不夠高，不足以顯示它，這就是爲什麼它在h3底部被切斷的原因。你想一個變通，你可以嘗試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; 
    [email protected]:block; 
    width:23px; 
    height:12px; 
    top:45px; 
    left:50%; 
    margin-left:-12px; 
}

Example

Or to show the arrow underneath the h3

來源

2014-07-09 10:34:35 Pete

在閱讀所有答案後，我意識到我對自己的工作並不清楚。你是對的，我試圖讓箭頭顯示在h3下。感謝您的幫助:) – Plaedien

沒有問題，很高興我可以幫助，只是在我的答案中發現了一個錯字 - 在'display：block'行中不應該有@ @ – Pete

的問題是圖像相對設置爲背景，它只會顯示基於高度的實際H3格，這是23px，因此截止。將以下內容添加到h3：hover。

h3:hover { 
    height: 40px; 
}

這撥弄會告訴你我是什麼意思http://jsfiddle.net/mN7mZ/5/

來源

2014-07-09 10:31:52 Key

我只想增加h3.test的padding-bottom提供足夠的空間，爲您的箭頭顯示，我還增加了padding-top，這樣的比例看好的：

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

這是JSFiddle。

來源

2014-07-09 10:32:33

減少中心的價值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; 
}

來源

2014-07-09 10:33:58 PrzemG

增加填充頂部和底部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; 
}

來源

2014-07-09 10:34:14

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; 
}

來源

2014-07-09 10:42:33

更新您的css –

兒童元素出現在img

回答

相關問題