鼠标移动时滑动叠加div闪烁

时间：2014-12-01 14:02:40

标签： html css

在构建引导程序Wordpress主题时，我遇到了以下内容：

我有一个div，它在悬停时会显示一个叠加层（从顶部滑入），当它滑入时我摇动元素它会闪烁......我无法理解为什么。

以下是代码示例：

HTML 

<article class="col-sm-6 col-md-6 col-lg-4 reference-container" id="post-111">
    <div id="post-111-thumbnail" class="archive-thumbnail-container content-hover">
      <img width="600" height="400" src="http://svb-test.icuweb.nl/wp-content/uploads/2014/09/DSC02791-600x400.jpg" class="attachment-reference-image wp-post-image" alt="SONY DSC" />      <h3 class="reference-title">De Hypotheker Venray</h3>
      <div class="reference-excerpt"><p>&#8220;Flexibel en betrouwbaar.&#8221;</p>
</div>
    </div>
    <div id="post-111-content" class="reference-content content-slide">
      <div class="reference-content-content">
      <h4>De Hypotheker Venray</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris nunc, dapibus in congue blandit, pellentesque vitae metus. Pellentesque faucibus lacus a sapien consectetur, id dictum neque scelerisque. Nam in <a href="http://svb-test.icuweb.nl/referenties/de-hypotheker-venray/">Lees verder</a></p>
      </div>
    </div>
  </article>

CSS 

.reference-container {
    position: relative;
    overflow: hidden;
}
.archive-thumbnail-container {
    position: relative;
}
.reference-excerpt {
    position: absolute;
    bottom: 3em;
    color: #fff;
    width: 100%;
    background: rgba(0,83,184,0.8);
    background: -moz-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,83,184,0.8)), color-stop(57%, rgba(0,83,184,0.7)), color-stop(58%, rgba(0,83,184,0.7)), color-stop(80%, rgba(0,83,184,0.42)), color-stop(100%, rgba(0,83,184,0)));
    background: -webkit-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: -o-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: linear-gradient(to right, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0053b8', endColorstr='#0053b8', GradientType=1 );
}
.reference-excerpt p {
    font-size: 1.2em;
    padding: 0.2em;
    margin-bottom: 0;
}
.reference-title {
    position: absolute;
    top: 0.5em;
    left: 1em;
    color: #0052b8;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px #fff;
    max-width: 90%;
}
.reference-content {
    max-width: 100%;
}
.content-hover { 
    position: relative;
    overflow: hidden;
}
.content-hover img {
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}
.content-hover:hover > img {
    transform: scale(1.5,1.5);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}
.content-slide:hover + .content-hover img {
    transform: scale(1.5,1.5);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.content-slide:hover, .content-hover:hover + .content-slide {
    top: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}
.content-slide:hover, .content-hover:hover > .reference-title {
    display: none;
}
.content-slide {
    position: absolute;
    top: -360px;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
}

1 个答案:

答案 0 :(得分：0)

如Joe Corby所述和我自己的评论; 正确的CSS是：

.reference-container {
    position: relative;
    overflow: hidden;
}
.archive-thumbnail-container {
    position: relative;
}
.reference-excerpt {
    position: absolute;
    bottom: 3em;
    color: #fff;
    width: 100%;
    background: rgba(0,83,184,0.8);
    background: -moz-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,83,184,0.8)), color-stop(57%, rgba(0,83,184,0.7)), color-stop(58%, rgba(0,83,184,0.7)), color-stop(80%, rgba(0,83,184,0.42)), color-stop(100%, rgba(0,83,184,0)));
    background: -webkit-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: -o-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    background: linear-gradient(to right, rgba(0,83,184,0.8) 0%, rgba(0,83,184,0.7) 57%, rgba(0,83,184,0.7) 58%, rgba(0,83,184,0.42) 80%, rgba(0,83,184,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0053b8', endColorstr='#0053b8', GradientType=1 );
}
.reference-excerpt p {
    font-size: 1.2em;
    padding: 0.2em;
    margin-bottom: 0;
}
.reference-title {
    position: absolute;
    top: 0.5em;
    left: 1em;
    color: #0052b8;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px #fff;
    max-width: 90%;
}
.reference-content {
    max-width: 100%;
}
.content-hover { 
    position: relative;
    overflow: hidden;
}
.content-hover img {
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}
.content-hover:hover > img {
    transform: scale(1.5,1.5);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}
.content-slide:hover + .content-hover img {
    transform: scale(1.5,1.5);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.reference-container:hover > .content-slide {
    top: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    transition: all .5s linear;
}
.content-slide:hover, .content-hover:hover > .reference-title {
    display: -200px;
}
.content-slide {
    position: absolute;
    top: -360px;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
}
相关问题
最新问题