html - 使用带有 css 的生成内容悬停状态

Question

我正在尝试使用 CSS 在伪元素中显示生成的内容。

悬停状态无法正常工作。如果鼠标从底部进入，则从最后一个按钮生成的内容会在鼠标实际悬停在按钮上之前出现。有没有办法解决这个问题，让内容只在按钮悬停时出现？

这是一个例子的 fiddle :http://jsfiddle.net/Ts6qy/

这是我的 HTML:

<div class="container">
  <span data-title="Number 1">Item 1</span>
  <span data-title="Number 2">Item 2</span>
  <span data-title="Number 3">Item 3</span>
  <span data-title="Number 4">Item 4</span>    
</div>

这是我的 CSS:

.container {
  position: relative;
  text-align: center;
  padding: 20px 0;

  max-width: 420px;
  margin: 0 auto;
}

.container span {
  display: inline-block;
  padding: 2px 6px;
  background-color:#78CCD2;
  color:#FFFFFF;
  border-radius:4px;
  margin:3px;
  cursor:default;
}   

/* Pseudo-elements can even access attributes in their parent elements */
.container span::before {
  position:absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  content: attr(data-title); 

  color: #666666;
  font-weight:bold;
  text-align: left;
  opacity: 0;
  /*Animate the transistions */
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.container span:hover::before {
  opacity: 1;
}

Answer 1

另一种方法，可以更清楚地说明正在发生的事情:

添加pointer-events: none到伪元素:

.container span::before {
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    content: attr(data-title); 

    color: #666666;
    font-weight:bold;
    text-align: left;
    opacity: 0;
    /*Animate the transistions */
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    pointer-events: none;
}

它解决了问题(当然是在支持浏览器方面)。

发生的事情是悬停是由 span 和 span 的伪元素触发的。