html - 将鼠标悬停在p元素上以显示div

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        5年前关闭。
                                                                                            
                
        
当我将鼠标悬停在p元素上时，我试图使div可见，并且我尝试使用类似问题的答案而没有成功。我认为问题可能在于我使用了可能不理想的印刷问题解决方案...无论如何，这是代码：

的HTML

<div class="priser">
<p id="price_list"><div id="image1"></div>
FRISYRKLIPPNING & STYLING</p>
</div>
<div class="priser2">
<p>&nbsp;&nbsp;&nbsp;<span style="letter-spacing:2px">FRÅN 449KR</span></p>

的CSS

.priser {
    top: 280px;
    position: absolute;
    font-family: "helveticaneueltstd ltcn";
    letter-spacing: 2px;
    left: 300px;
    line-height: 30px;
    font-size: 18px;
    text-transform: uppercase;
    padding-bottom:130px;
    cursor: default;
}

.priser2 {
    top: 280px;
    position: absolute;
    font-family: "helveticaneueltstd ltcn";
    letter-spacing: 220px;
    left: 300px;
    line-height: 30px;
    font-size: 18px;
    text-transform: uppercase;
    cursor: default;
}

#image1 {
position: fixed;
top: 220px;
width: 360px;
left: 50%;
margin-left: -180px;
display: none;
background-image: url(../images/MSH%20KLAR/Toppklippning%20med%20styling.png);
}

.price_list:hover #image1 {
display:block;
}

最佳答案

当price_list是p元素的ID时，您具有.price_list（一个类）。

更改为：

#price_list:hover #image1 {