悬停时如何使表格中的图像悬停为浅粉红色？答案

【问题标题】：How do I make an image in a table hover light pink when hovered over?悬停时如何使表格中的图像悬停为浅粉红色？
【发布时间】：2012-02-09 17:35:40
【问题描述】：

我无法相信这是多么困难和乏味。到目前为止，我尝试过的任何方法都没有奏效。我有下面显示的表格，其中图像来自数据库。我要做的就是在它们悬停时在它们上面放置一个透明的粉红色层。你们中的一些人有哪些方法可以做到这一点？在这里（digrepro.com/home - 然后只需将鼠标悬停在任何图像上），您可以看到我已经在不同的页面上做到了这一点，但我无法让它与下面的代码一起工作。

<table bgcolor="#FFCCFF" cellpadding="0" cellspacing="0" style="margin-top:75px;">
<tr>
<?php $sql_endRow = 0;
$sql_columns = 10;
$sql_hloopRow1 = 0;
foreach ($products as $product) {
    if($sql_endRow == 0  && $sql_hloopRow1++ != 0) { ?>
        <tr>
    <?php } ?>                
    <td>
        <a href="javascript:void(0)" onClick="get_product_id(<?php echo $product['product_id']; ?>)"><img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" border="0" width="23px" style="margin:4px 2px 0px 2px;" /></a>
        </td>
    <?php $sql_endRow++;
        if($sql_endRow >= $sql_columns) { ?>
            </tr>
            <?php $sql_endRow = 0;
        }
}
if($sql_endRow != 0) {
    while ($sql_endRow < $sql_columns) { ?>
        <td>&nbsp;</td>
    <?php $sql_endRow++;
    } ?>
    </tr>
<?php }?>
</table>

【问题讨论】：

标签： jquery html

【解决方案1】：

实现半反色叠加样式效果的一种方法是将包含元素的背景设置为所需的颜色 [确保此元素具有填充：0 否则它将在图像周围泄漏] 然后在悬停时使图像的不透明度大约为 0.5。

td {
background-color: pink;
}

img:hover {
opacity: 0.5;
}

[我认为旧 IE 不完全支持不透明度，您可能想使用 css 过渡或 jquery 淡化来使它变得更好]

【讨论】：

【解决方案2】：

无需注入更多 HTML 元素，只需给 TD 一个 background-color:pink; 并将图像设置为 img:hover{ opacity:.5; }。

【讨论】：

我使用了这个修复（我喜欢短代码 LOL），但它也改变了表格的背景。有什么简单的方法吗？

【解决方案3】：

我会创建一个 div，将其绝对放置在图像上方，将其着色为粉红色并使用 CSS 不透明度设置。如果你需要我可以详细说明。

【讨论】：

【解决方案4】：

由于它来自数据库，因此您必须更加小心地选择它。

新的“on()”函数处理得很好。它看起来像这样。确保为您的表提供“class='table'”，以便您可以选择它。

$(document).on('hover', '.table', changecolor);

函数改变颜色（） { 在这里写你的代码 });

【讨论】：

【解决方案5】：

您可以这样做（未经测试）：

var $overlay = $('<div />').addClass('pink-overlay').hide();

$('img.with-overlay').each(function() {
  $(this).wrap($('<div />').addClass('img-wrapper'));
  $(this).parent().append($overlay);
}).on('hover', function() {
  $('.pink-overlay', this).stop(true).fadeIn();
}, function() {
  $('.pink-overlay', this).stop(true).fadeOut();
});

CSS：

.pink-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  opacity: 0.5;
  background: pink;
}

.img-wrapper {
  position: relative;
}

【讨论】：

【解决方案6】：

您可以使用绝对定位的 div 并设置不透明度来实现您想要的透明度，display:none 然后在悬停时更改 div 的显示设置。

另一种选择是在 div 上使用背景图像。使用具有两种图像版本（常规和粉红色）的图像精灵，您可以简单地在悬停时移动背景位置。

【讨论】：

【解决方案7】：

您可以尝试设置图像的透明度以允许背景渗透。这是有关如何执行此操作的答案：jquery。

或者，您可以使用 a:hover css styling 将正常的清晰图像换成浅粉色的图像。这将要求您预先制作粉红色图像并将其托管在某处。

像这样： `

<style type="text/css">
.links {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    display:block; /*This Cover Full TD */
    background:url(link.png) center top no-repeat; /*This Will Set the Link background */
    height:25px; /*This Will Make Fixes Size Link (Use Image height)*/
    width:100px; /*This Will Make Fixes Size Link (Use Image width)*/
    line-height:25px;
    text-align:center;
    font-size:10pt;
    text-decoration:none;
}
.links:hover {
    background:url(hover-link.png) center top no-repeat;
}
</style>
`

【讨论】：

【解决方案8】：

这里有动画：

$('yourElement').hover(function(){
    $(this).stop().animate({backgroundColor: 'transparent',"opacity": 0.5});
},function(){
    $(this).stop().animate({backgroundColor: '#FFC0CB',"opacity": 1});
});

祝你好运

【讨论】：