Наведите указатель мыши на один div, и он снова изменит

Question

Так что я хочу навести курсор на поле и активировать его еще один div с ослабляющими эффектами. Вы можете видеть ниже: .images{} имеет бесконечный прокрутки 0s, а затем .box:hover > .images{} - это когда я меняю 0s на 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%); 
    } 
} 

Answer 1

Если изменить HTML включить box класс перед images класса, вы можете использовать adjacent selector для выбора .images когда ему предшествуют .box:hover:

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

Working demo.

Я также добавил z-index: 1 в .box, чтобы он находился поверх элемента изображения.