Question

我创建了两个CSS类：

如何在第一个和第二个CSS样式之间进行转换（第一个＆gt;秒）？为什么它不起作用？

HTML：

<div class="cross-row-line"></div>
on hover, it must be that in smooth   transition:
<br/>
<div class="cross-row-line-t"></div>

CSS：

div.cross-row-line {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1), rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    pointer-events: none;
    z-index: 10000;
    width: 200px;
    height: 300px;
    transition: background 2s linear;
}
div.cross-row-line:hover {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1), rgba(255, 215, 0, 0.5));
}
div.cross-row-line-t {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1), rgba(255, 215, 0, 0.5));
    pointer-events: none;
    z-index: 10000;
    width: 200px;
    height: 300px;
}

Answer 1

div.cross-row-line {
   pointer-events: none;  
}

取出pointer-events: none;

这应该有效！

如果您想知道原因，请参阅下面的说明。

将Point-event设置为none。该元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间根据往返于后代的方式触发此父元素上的事件侦听器。

干杯，

CSS3。创建动画背景

1 个答案: