jquery - 为位于另一个仅用于文本的 div 后面的 div 启用悬停 css 转换

Question

我有一个网站，我正在尝试以与开发 wordpress 网站相同的方式开发该网站，但 wordpress 网站非常缓慢，因此只能重新创建很酷的部分。

wordpress 站点是 http://myleisure.com.au正如您在顶部看到的那样，有 3 个盒子，里面有产品图片，然后是文字。我在网站 http://ozledgrowlights.com.au/#portfolio 上重新创建了这个你可以在这里看到无用的codepen http://codepen.io/anon/pen/Qyxxbp

 <section id="portfolio">
<div class="container-fluid nopadding">
             <div class="row nopadding">

                   <div class="col-lg-4 nopadding image">
                        <img class="imgwidth" src="img/11.jpg" alt="" />
                                <div class="absolute text-center">
                                    <span> lol </span>
                           </div>
                   </div>
                <div class="col-lg-4 nopadding image">
                    <img class="imgwidth" src="img/22.jpg" alt="" />
                        <div class="absolute text-center">
                                <span> lol </span>
                        </div>
                </div>
                <div class="col-lg-4 nopadding image">
                    <img class="imgwidth" src="img/33.jpg" alt="" />
                        <div class="absolute text-center">
                                <span> lol </span>
                        </div>
                </div>

        </div>
    </div>
</section>

基本上我是在 <img> 上面获取文本通过给 img 一个相对位置和文本的 div 一个绝对位置和 top: 0px;唯一的问题是，因为它是文本的 div，当我给它 100% 的高度时，它覆盖了 img 的悬停区域，无论如何？我看到了一种通过 javascript 进行转换的方法，所以可能不得不这样做。

但是对于这个问题我有一个......部分b。谁能猜出为什么当您将鼠标悬停在第二个和第三个图像框上方时，它们之间会出现一条细黑线？

Answer 1

将它们都包裹在另一个 div 中，并使用父级的 :hover 状态来更改图像。

或者，使文本 div 成为 img 的父级并直接使用其悬停状态。