0

そこで、Box にカーソルを合わせて、イージング効果を持つ別の div をアクティブにしたいと考えています。以下で.images{}は、0 秒の無限スクロールがあり.box:hover > .images{}、0 秒を 10 秒に変更してスライドショーを開始することがわかります。

HTML :

<div class="slideshow">
     <div class="images"></div>
     <div class="box"></div>   
</div>

CSS:

.slideshow {
  position: relative;
  overflow: hidden;
  height: 220px;
  width: 100%;
}
.box {
width:100px;
height:100px;
position: absolute;
left: 0;
top: 0;
background-color: #333;
}

.images {
  background: url('http://jamesebeling.com/testing/jamesebeling/wp-content/uploads/2013/08/buildings.png');
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
 -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-animation: slideshow 0s linear infinite;
  -moz-animation:    slideshow 0s linear infinite;
}
@-webkit-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
@moz-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
/* Hey browser, use your GPU */
   -webkit-transform: translate3d(0, 0, 0);
}

@-webkit-keyframes moveSlideshow {
    0%   { 
        -webkit-transform: translateX(0);  
    }    
    100% { 
        -webkit-transform: translateX(-200%);  
    }
}
@-moz-keyframes moveSlideshow {
    0%   { 
        -moz-transform:    translateX(0); 
    }    
    100% { 
        -moz-transform:    translateX(-200%); 
    }
}

.box:hover > .images {
.images {
  background: url('http://jamesebeling.com/testing/jamesebeling/wp-content/uploads/2013/08/buildings.png');
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
 -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-animation: slideshow 10s linear infinite;
  -moz-animation:    slideshow 10s linear infinite;
}
@-webkit-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
@moz-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
/* Hey browser, use your GPU */
   -webkit-transform: translate3d(0, 0, 0);
}

@-webkit-keyframes moveSlideshow {
    0%   { 
        -webkit-transform: translateX(0);  
    }    
    100% { 
        -webkit-transform: translateX(-200%);  
    }
}
@-moz-keyframes moveSlideshow {
    0%   { 
        -moz-transform:    translateX(0); 
    }    
    100% { 
        -moz-transform:    translateX(-200%); 
    }
}
4

1 に答える 1

1

boxクラスの前にクラスを含めるように HTML を変更すると、隣接するセレクターimagesを使用して、前に がある場合に選択できます。.images.box:hover

.box:hover + .images { ... }

作業デモ。

また、画像要素の上に配置するように追加z-index: 1しました。.box

于 2013-08-12T18:04:04.343 に答える