Question

我无法相信这是多么困难和乏味。到目前为止，我没有尝试过任何工作。我有下面的表格，图像来自数据库。我想做的就是在它们悬停时在它们上面放一个透明的粉红色层。你有些人有什么方法可以做到这一点？在这里（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>

Answer 1

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

td {
background-color: pink;
}

img:hover {
opacity: 0.5;
}

[我认为旧IE中并不完全支持不透明度，你可能想要使用css过渡或jquery淡化以使其更好]

Answer 2

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

Answer 3

因为它来自数据库，所以你必须更加谨慎地选择它。

新的＆＃34; on（）＆＃34;功能很好地处理它。它看起来像这样。确保提供一个＆＃34; class =＆＃39;表＆＃39;＆＃34;到你的桌子，这样你就可以选择它。

$（document）.on（＆＃39; hover＆＃39;，＆＃39; .table＆＃39;，changecolor）;

function changecolor（）       {       写你的代码，在这里       }）;

Answer 4

无需注入更多HTML元素，只需为广告管理系统background-color:pink;设置并将图片设置为img:hover{ opacity:.5; }。

Answer 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;
}

Answer 6

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

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

Answer 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>
`

Answer 8

这里有动画：

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

祝你好运

如何在桌子上制作图像时悬停在浅粉红色上？

8 个答案: