php - CSS 悬停问题

Question

我正在尝试创建悬停效果（下面带有 html 和 CSS）。悬停效果有效，但我无法将其置于 .portfolio_thumb 之上。

我真的不是那么精通 CSS，所以要温柔 :-) 我有一个测试站点在这里运行：http: //kazam.dk/36-2/#! prettyPhoto

您可以在图片下方看到它加载的位置！

css

.portfolio_thumb{
    position: relative;
    z-index: 0;

}

.portfolio_thumb a span{
    display: none;
    position: relative;
    float:left;
    width:163px;
    z-index: 2;
}

.portfolio_thumb a:hover span{
    display: block;
    position: absolute;
    z-index: 9;
    width:163px;
    height: 229px;
}

HTML

<div class="portfolio_thumb">

<!-- .portfolio_short_content -->
    <div class="portfolie_short_content_containe">


        <a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">


            <p class="textarea"><?php echo $full_descr; ?></p>
            <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>                                     
                <span>
                    <p><span class="lable"><?php echo $short_descr;?></span> </p>
                    <p><span class="lable"><?php echo $link; ?></span> </p>                                                      
                </span>                                                                     
        </a>                                                                            

    </div>
</div>

Answer 1

它的工作检查在这里：http: //jsfiddle.net/surendraVsingh/fLZKe/2/ *（更新）

Answer 2

尝试使用以下 CSS 和 HTML 代码：

CSS

.portfolio_thumb{
    position: relative;
    border:1px solid;

}
.portfolio_thumb a div{
    display: none;
}
 .portfolio_thumb a:hover{
    position: inherit;
}
.portfolio_thumb a:hover div{
    display: block;
    position: absolute;
    top:50px;
    left:10px;
}

HTML

<div class="portfolio_thumb">

    <!-- .portfolio_short_content -->
    <div class="portfolie_short_content_containe">
        <a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">
            <p class="textarea"><?php echo $full_descr; ?></p>
            <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>                                     
                <div>
                    <p><span class="lable"><?php echo $short_descr;?></span> </p>
                    <p><span class="lable"><?php echo $link; ?></span> </p>                                                      
                </div>
        </a>
    </div>
</div>

Answer 3

1. 将<span>标签移到标签上方<img>并为其添加一个类（我在下面的示例中使用了类“悬停”）。

2. 将该类添加到 CSS 选择器。CSS 的其余部分不一定需要更改，但您可以根据需要定位悬停<span>。

3. 工作示例：http: //jsfiddle.net/x6Z2L/