Question

首先，根据我的代码，这里是我想要做的Reference。

我在使用css时遇到了一些麻烦，我有一个php文件，它返回一个包含图像的表：

echo    '<td valign="bottom">
            <div class="profile-image">
                <figure>
                    <a href="#"><img src="'.$image.'" width="250px" height="200px" /></a>
                    <figcaption>'.$nombreAlmno.'<br>'.$semestre.' semestre</figcaption>
               </figure>
               <span class="overlay"></span>
             </div>                                         
     </td>';

它确实有效，这是我得到的：

所以我的问题是我尝试使用我在css文件中调用的在悬停时显示另一个图像：

.profile-image:hover .overlay {
position:absolute;
width: 800px;
height: 800px;
z-index: 100;
background: transparent url('http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg') no-repeat;
cursor: pointer;
}

我知道我的css正在工作（至少是它的一部分），因为当我将光标放在图像上时，它会变为指针光标，但是根本没有显示。

任何提示或技巧都将不胜感激。

Answer 1

您需要父元素（相对于绝对定位的元素）具有设置位置（在这种情况下，position：relative可能是最佳的）。此外，请务必设置顶部，底部，左侧或右侧属性以控制图像的显示位置！

http://jsfiddle.net/gztLspL3/4/

HTML：

<table>
<td valign="bottom">
    <div class="profile-image">
        <figure> <a href="#">
                <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" width="250px" height="200px" />
            </a>

            <figcaption>'.$nombreAlmno.'
                <br>'.$semestre.' semestre</figcaption>
        </figure> <span class="overlay"></span>

    </div>
</td>

CSS：

.profile-image {
    position: relative;
}

.profile-image:hover .overlay {
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: 100;
    background: transparent url('http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg') no-repeat;
    cursor: pointer;
    left: 100%;
    top: 0;
}

此外，如果您希望它直接显示在图像旁边： http://jsfiddle.net/gztLspL3/6/

Answer 2

像这样添加jquery

$( "div.profile-image>a>img" ).hover(
  function() {
    $( "#bigOne").first().css("display", "block").css("background", "transparent url('" + $(this).prop("src").replace("_s.jpg", ".jpg") + "') no-repeat");
  }, function() {
    $( "#bigOne" ).css("display", "none").css("background", "");
  }
);

并更改您的CSS名称

#bigOne {
    position:absolute;
    width: 800px;
    height: 800px;
    z-index: 100;
    cursor: pointer;
    display:none;
}

并将更改为

不要忘记添加jquery你的页面

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

css没工作：悬停

2 个答案: