:对Div的对象悬停效果(CSS / JS?)

时间:2018-02-22 11:46:25

标签: javascript html css

我有一个CSS悬停效果,当您将鼠标悬停在初始图像上时,它会在两个图像之间循环。

HTML:

<img class="bottom" src="photos/800_800_<?php echo $r->image1;?>" />
<img class="top" src="photos/800_800_<?php echo $r->image2;?>" />

CSS:

#cf img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity: 0;
}

如何将其设置为当您将鼠标悬停在不在ID为#cf的div中的标记时,它会触发相同的效果?

1 个答案:

答案 0 :(得分:0)

你不是要添加样式ID,你必须在img标签中添加id尝试以下代码。

SNO     Name    Sales   Profit  Sal/Pro
1      John     50      NULL    Sales
1      John     NULL    20      Profit
2      Peter    60      NULL    Sales
3      Mark     15      NULL    Sales
3      Mark     NULL    10      Profit
4      Nicolas  NULL    -10     Profit
5      Alex     70      NULL    Sales
5      Alex     NULL    20      Profit