css - 包含元素外的背景图像悬停效果

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

首先，扔掉这个:

$(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 上没有演示，因为我懒得做表结构或为它获取图像。