CSS隱藏div無效？

我應該能夠隱藏與CSS一個div並顯示在盤旋，但由於某種原因，我沒有得到的圖像上相同的懸浮效果，我把它放在這恰好是上Link

任何建議，爲什麼它現在可以工作？

下面是我用

.user-image { 
    float:none !important; 
    right: 0; 
    margin-right: 4.5%; 
    position: absolute; 
    z-index: 100; 
} 

.user-image img { 
    width: 65px !important; 
    height: 65px !important; 
    margin-top: -15px; 
    border: 2px solid white; 
    border-radius: 32px; 
} 

.user-image li { 
    list-style: none; 
    background-color: white; 
    display: none; 
    padding: 10px; 
    width: 100px; 
    margin-left: -35px; 
} 

.user-image img:hover + .user-image li { 
    display: block; 
}

的CSS這裏的HTML

<div class="user-image"> 
<img src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo"> 
<li> Test </li> 
<li> Test 2 </li> 
</div>

來源

2015-09-11 コードバリノ

請包括HTML以及。最好用小提琴或片段。 – Roope

https://validator.w3.org/nu/?doc=http%3A%2F%2Fchocobento.x10.mx%2Fwp%2F – j08691

標記：*尋求調試幫助的問題（「爲什麼不是這個代碼工作？「）必須包含所需的行爲，特定的問題或錯誤以及在問題本身**中重現**所需的最短代碼。** - 請編輯您的問題以包含足夠的代碼以重現問題。 – BSMP

這是行不通的：

.user-image img:hover + .user-image li { 
    display: block; 
}

你選擇任何li這是一個.user-image的後裔，這是一個img:hover是一個.user-image的後代的兄弟姐妹。

我不能給你一個實際的解決方案，因爲我們必須要查看目前正在你的PHP標籤返回的HTML，但如果你的img是，是隱藏的li裏面，那麼你應該隱藏/顯示當li是徘徊，而不是img。

更新

根據您所提供的HTML，你只需要在你的選擇丟棄第二.user-image：

.user-image img:hover + li { 
    display: block; 
}

來源

2015-09-11 17:39:24

我可以告訴你，以及讓我再次重新編輯。 –

我加了你想要看的HTML –

實際上，sorta只有一個li [list item]顯示。我只是添加另一個李做其他節目？ –

讓像這樣一些改變，你的代碼的東西

與此代碼替換代碼。

<div class="user-image"> 
    <a><img src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo"></a> 
    <div class="user-image"> 
     <li> Test </li> 
     <li>Test 2 </li> 
    </div>

和風格

a:hover + .user-image li { 
display: block; 
}

CLICK HERE TO SEE YOUR CODE IN FIDDLE

如果有必要作出適當的改變..

GUD運氣

來源

2015-09-11 17:32:52 Vijay

我編輯了這個問題，我希望它隱藏起來很簡單，但是懸停顯示本身。 –

我添加的第一個鏈接將您帶到一個關於如何使它工作的stackoverflow示例，但是儘管我遵循了無法複製它的步驟。 –

去fiddle.com並做一個小提琴code.and發送鏈接。 – Vijay

可以使用opacity完成此類似的例子低於

.user-image { 
 
    opacity: 0; 
 
    background-color: red; 
 
} 
 
.user-image:hover { 
 
    opacity: 1; 
 
}

<div class="user-image"> 
 
    <a href="">Test hover thing here</a> 
 
</div>

來源

2015-09-11 17:40:34 indubitablee

我打算放置鏈接，以便隱藏它仍然可以讓它們被點擊。 –

CSS隱藏div無效？

回答

相關問題