hover div在另一個div內時不起作用

我正在構建包含學校活動的網頁。在我的網頁上，我嘗試創建div（eventContainer），其中我有另一個div（eventImgContainer）與圖像，而此圖像在懸停時執行一個操作，例如，模糊或不透明。hover div在另一個div內時不起作用

問題是，當div與img在任何其他div內時，它不會響應懸停。

我在尋找與懸停相關的語法，如「>」或「+」或'，'......沒有任何接縫可以工作。任何想法爲什麼？

我真的希望只使用這個CSS/

HTML：

<div class="eventContainer"> 
    <div class="eventDescription"><!-- here code with event description--></div> 

    <div class="eventImgContainer"> 
    <img src="1_Zdjecia/event_1/1.jpg" id="Photo1" title="football"> 
    <p class="hidedText">Go to Gallery</p> 
    </div> 
</div>

CSS：

.eventContainer{ 
    z-index: -1; 
    position:relative; 
    margin:auto; 
    left:0; 
    right:0; 
    width:700px; 
    height:270px; 
    background-color: #E6E6E6; 
    border: 4px solid white; 
} 

.eventImgContainer{ 
    position:relative; 
    width:375px; 
    height:217px; 
    top:20px; 
    left: 305px; 
    margin:0; 
} 

.eventImgContainer img { 
    position:absolute; 
    width:100%; 
    display:block; 
} 

.eventimgcontainer:hover #Photo1 { 
    opacity:0.5; 
    width:400; 
}

來源

2017-02-23 Onebus

請只使用一個縮進規則，像這樣的：「屬性：值;' （'：'和'值'之間有一個空格） – Kornflexx

你最後的CSS規則是錯誤的

.eventImgContainer:hover #Photo1 { 
    opacity: 0.5; 
    width: 400px; 
}

CSS是區分大小寫的！

而且你不應該有負Z指數（你應該刪除Z指數屬性或設置一個正值）。

來源

2017-02-23 12:19:19 Kornflexx

真的，謝謝:) – Onebus

它適用於我當我只是改變z-index：-1;到z-index：1; 而你最後一個選擇器（eventimgcontainer）是錯誤的，應該是「eventImgContainer」。但是你的例子也適用於這個小寫選擇器。問題只在於你的z-index。

.eventContainer{ 
    z-index: 1; 
    position:relative; 
    margin:auto; 
    left:0; 
    right:0; 
    width:700px; 
    height:270px; 
    background-color: #E6E6E6; 
    border: 4px solid white; 
} 

.eventImgContainer{ 
    position:relative; 
    width:375px; 
    height:217px; 
    top:20px; 
    left: 305px; 
    margin:0; 
} 

.eventImgContainer img { 
    position:absolute; 
    width:100%; 
    display:block; 
} 

.eventImgContainer #Photo1 { 
    opacity:0.5; 
    width:400; 
}

來源

2017-02-23 12:21:06 fGeyer

謝謝，它幫助，但現在eventContainer越過標題（導航欄），這是固定.... z-index：2對於導航欄沒有幫助:( – Onebus

你能告訴我們你的css和導航欄的html嗎？ – fGeyer

並且請標記一個答案作爲解決方案:)我們將在幾分鐘內用導航欄修復你的問題。 – fGeyer

首先是刪除的z-index

.eventContainer{ 
    position:relative; 
    margin:auto; 
    left:0; 
    right:0; 
    width:700px; 
    height:270px; 
    background-color: #E6E6E6; 
    border: 4px solid white; 
}

然後糾正類的名稱

.eventImgContainer:hover #Photo1{ 
    opacity:0.5; 
    width:400; 
}

來源

2017-02-23 12:32:52

hover div在另一個div內時不起作用

回答

相關問題