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

我想在我的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>

来源

2011-08-17 YourBudWeiser

我必须指出：对于数据表，您应该使用'

'，而不是'''''''display：table *'的数量。在语义上，'

'是正确的选择。 – thirtydot

这是真的，但这是实际代码的简化版本。使用表格对于我们正在使用的真实代码并不实用。 – YourBudWeiser

@YourBudWeiser：如果你使用'display：table- *'之类的东西，你显然不关心IE6。所以停止使用jQuery来添加一个.highlight类，并开始在你的CSS中使用'：hover'！ –

回答

首先，扔掉这一点：

$(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上没有演示，因为我不能为表格结构或为其获取图像而烦恼。

来源

2011-08-17 15:07:58

我也会去伪元素路由，但是它在这种情况下无法使用'display：table-row'。它保持相对于窗口而不是'.table-row'。 – tw16

不是吗？我会认为它会的。不知道这可能是一个浏览器错误。现在去睡觉，但是当我有时间的时候（不会），我会把它列入我的调查清单。 –

哈哈，你是一个有趣的家伙克里斯！这确实有效。示例中的左侧位置将图像从屏幕上移开，但将左侧改为正数，就是这样。谢谢！ – YourBudWeiser

你需要把你的形象在一个DIV，然后将DIV相对于该行进行定位。背景不能超出其容器的边界。

来源

2011-08-17 14:45:06

你可以在纯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方法，因为你当前使用table属性的div方法可能会非常快速地变得笨拙。

来源

2011-08-17 14:48:24 Terrik

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

回答

相关问题