Question

我正在尝试将背景图像悬停效果应用于我的css表中的每一行，但需要它显示在包含元素的左侧。

View image http://www.weiserwebworld.com/images/view.gif

有什么想法吗？

JS：

$(function() {
    $(".table-row").hover(function() { 
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    })
})

CSS：

#container {
    width: 660px; 
    margin: 20px auto;
}

div .table {
    display: table;
    border: 1px red solid;  
}
div .table-row {
    display: table-row;
}
div .table-cell {
    display: table-cell;
    width: 145px;
    padding: 10px;
    vertical-align: top;

}
.highlight {
    cursor: pointer;
    background-image: url('click-to-view.png');
    background-position: 0 center;
    background-repeat: no-repeat;

}

HTML：

<div id="container">
    <div class="table">
        <div class="table-row">
            <div class="table-cell">Ralph Kramden</div>
            <div class="table-cell">Truck Driver</div>
            <div class="table-cell">8/17/2010</div>
            <div class="table-cell">N/A</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Ralph Kramden</div>
            <div class="table-cell">Truck Driver</div>
            <div class="table-cell">8/17/2010</div>
            <div class="table-cell">N/A</div>
        </div>
    </div>
</div>

Answer 1

您可以在纯CSS中执行此操作。

这很快又很脏，你必须根据自己的需要进行调整，但一般的想法是：

如果你给你的行一个id（），你可以添加这样的CSS样式：

.overlay {
   display: none;
   position: absolute;
   left: -30px; //makes it appear left of box, even though it's technically "in" box.
}

#table-row1:hover .overlay {
    display; block;  //Causes div to appear.
}

现在，只需添加您想要的图像，就会在您滚动行时显示。

请注意，class = overlay div必须放在id = table-row1 div的INSIDE中，否则hover-appear将无效！

我还建议使用相同的标记重做：hover方法，因为你当前的具有表属性的div方法可能会非常快速地变得难以处理。

Answer 2

首先，扔掉它：

$(function() {
    $(".table-row").hover(function() { 
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    })
})

这是令人厌恶的。

然后将CSS选择器.highlight更改为.table-row:hover。由于您显然不关心IE6（其中:hover仅适用于a元素），因此使用:hover没有任何问题。

现在解决问题的其余部分。

我将使用的技术是before或after伪元素。像这样：

.table-row {
    position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */
}
.table-row:hover:after {
    position: absolute;
    left: -80px; /* Adjust as desired */
    content: url(click-to-view.png); /* This makes it an image */
}

可以通过这种方式进行大量的调整，但这是一般的想法。没有关于jsfiddle的演示，因为我不能为表格结构或为其获取图像而烦恼。

Answer 3

您需要将图像放在DIV中，然后将DIV相对于行放置。背景不能超出其容器的边界。

背景图像悬停效果在包含元素之外

3 个答案: