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

将<span>标记移到<img>标记上方并为其添加一个类（我在下面的示例中使用了“hover”类）。
将该类添加到CSS选择器。 CSS的其余部分不一定需要更改，但如果您愿意，可以将悬停<span>定位。
工作示例：http://jsfiddle.net/x6Z2L/

CSS悬停问题

3 个答案: