将p元素悬停在显示div上

时间:2014-05-04 17:37:41

标签: html css

当我徘徊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;
}

1 个答案:

答案 0 :(得分:2)

当price_list是p元素的ID时,你有.price_list(一个类)。

将其更改为:

#price_list:hover #image1 {