Question

我有两张照片在彼此的顶部，如果你将鼠标悬停在顶部，它会在1秒后从class CircularQueue<T> implements Iterable<T>{ private T queue[]; private int head, tail, size; @SuppressWarnings("unchecked") public CircularQueue(){ queue = (T[])new Object[20]; head = 0; tail = 0; size = 0; } @SuppressWarnings("unchecked") public CircularQueue(int n){ //assume n >=0 queue = (T[])new Object[n]; size = 0; head = 0; tail = 0; } public synchronized boolean join(T x){ if(size < queue.length){ queue[tail] = x; tail = (tail+1)%queue.length; size++; return true; } else return false; } public synchronized T top(){ if(size > 0) return queue[head]; else return null; } public synchronized boolean leave(){ if(size == 0) return false; else{ head = (head+1)%queue.length; size--; return true; } } public synchronized boolean full(){return (size == queue.length);} public boolean empty(){return (size == 0);} public Iterator<T> iterator(){ return new QIterator<T>(queue, head, size); } private static class QIterator<T> implements Iterator<T>{ private T[] d; private int index; private int size; private int returned = 0; QIterator(T[] dd, int head, int s){ d = dd; index = head; size = s; } public synchronized boolean hasNext(){ return returned < size;} public synchronized T next(){ if(returned == size) throw new NoSuchElementException(); T item = (T)d[index]; index = (index+1) % d.length; returned++; return item; } public void remove(){} } }淡化为opacity:1。

我希望他们将opacity:0作为默认值，然后，当悬停在另一个上时，应该会显示。

我遇到的问题是这两个图像现在都显示为opacity:0.7，因为显然它们稍微透明。

有办法做到这一点吗？

Answer 1

据我所知，您的基础图像也有点可见。

您需要做的是将第一张图像的不透明度设置为0，如下所示：

.img-overlay {
  display: inline-block;
  position: relative;
}

.img-overlay img {
  opacity: .7;
  transition: opacity 1s;
}

.img-overlay img:last-child {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* Set opacity to 0, ... */
.img-overlay:hover img {
  opacity: 0;
}

/* ... but only for the last image set it to .7 */
.img-overlay:hover img:last-child {
  opacity: .7;
}

<a href="#" class="img-overlay">
  <img src="http://pipsum.com/235x110.jpg?1" />
  <img src="http://pipsum.com/235x110.jpg?2" />
</a>

交叉淡化具有0.7不透明度的2个图像

1 个答案: