Question

我有一个侧边栏，可以在悬停时展开，现在我用不透明度隐藏文本，当我将鼠标悬停在隐藏的跨度上时会触发效果。

我该如何解决这个问题？或者也许有更好的方法来创造我正在寻找的这种效果

提前致谢。

＆＃13;

#sidebar {
  user-select: none;
  position: fixed;
  width: 55px;
  height: 100vh;
  background: #2c2c2c;
  transition: 0.5s;
}

#sidebar:hover {
  width: 250px;
}

#sidebar:hover .sidebar-item span {
  opacity: 1;
}

.sidebar-item {
  padding: 10px 10px;
  border-left: 5px solid transparent;
}

.sidebar-item span {
  opacity: 0;
  transition: 0.5s;
}

＆＃13;

<div id="sidebar">
  <div class="sidebar-wrapper">
    <div class="sidenav-menu d-flex flex-column flex-grow">
      <div class="sidebar-item">
        <a class="d-flex" href="/">
          <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
          <span>Home</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex" href="/profile">
          <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
          <span>Profile</span>
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您更改了元素的不透明度，但它们仍然在文档中，因此它们会触发效果。

使用visibility: hidden / visible，悬停标签不会触发效果：

.sidebar-item span {
    opacity:0;
    transition: 0.5s;
    visibility : hidden
}       
#sidebar:hover .sidebar-item span{
    opacity:1;
    visibility : visible
}

Your updated JSFiddle

Answer 2

我认为您可以通过在import numpy import timeit import collections class CircularBuffer(object): buffer_methods = ('list', 'deque', 'roll') def __init__(self, buffer_size, buffer_method): self.content = None self.size = buffer_size self.method = buffer_method def update(self, scalar): if self.method == self.buffer_methods[0]: # Use list try: self.content.append(scalar) self.content.pop(0) except AttributeError: self.content = [0.] * self.size elif self.method == self.buffer_methods[1]: # Use collections.deque try: self.content.append(scalar) except AttributeError: self.content = collections.deque([0.] * self.size, maxlen=self.size) elif self.method == self.buffer_methods[2]: # Use Numpy.roll try: self.content = numpy.roll(self.content, -1) self.content[-1] = scalar except IndexError: self.content = numpy.zeros(self.size, dtype=float) # Testing and Timing circular_buffer_size = 100 circular_buffers = [CircularBuffer(buffer_size=circular_buffer_size, buffer_method=method) for method in CircularBuffer.buffer_methods] timeit_iterations = 1e4 timeit_setup = 'from __main__ import circular_buffers' timeit_results = [] for i, cb in enumerate(circular_buffers): # We add a convenient number of convenient values (see equality test below) code = '[circular_buffers[{}].update(float(j)) for j in range({})]'.format( i, circular_buffer_size) # Testing eval(code) buffer_content = [item for item in cb.content] assert buffer_content == range(circular_buffer_size) # Timing timeit_results.append( timeit.timeit(code, setup=timeit_setup, number=int(timeit_iterations))) print '{}: total {:.2f}s ({:.2f}ms per iteration)'.format( cb.method, timeit_results[-1], timeit_results[-1] / timeit_iterations * 1e3)

上设置

list:  total 1.06s (0.11ms per iteration)
deque: total 0.87s (0.09ms per iteration)
roll:  total 6.27s (0.63ms per iteration)

来解决您的错误

悬停效果仅对父div有影响

2 个答案: