Как сделать наложение с помощью css-зависания на другом элементе и псевдоклассе :: before

Question

Проблема: Оверлей должен отображаться при зависании круга. Я пытаюсь сделать это с помощью css. Я знаю, как это сделать, когда изображение зависло, а затем изображение получает оверлей, но как отобразить этот оверлей для изображения, когда круг завис? Ниже в моем css я оставил комментарии моего кода для ясности. Для меня было бы хорошо даже объяснение и пример с javascript или jQuery, как заархивировать этот результат.

HTML:

<div class="caption"> 
    <span class="point"></span> 
    <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" /> 
</div> 

CSS:

.caption { 
    position: relative; 
    overflow: hidden; 
    -webkit-transform: translateZ(0); 
} 

.caption::before { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: transparent; 
    transition: background .35s ease-out; 
} 
/* This block of code is working. When i hover on my img, it gets the overlay 
.caption:hover::before { 
    background: rgba(248, 214, 215, .5); 
} 
*/ 

/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */ 
.point:hover: + .caption::before { 
    background: rgba(248, 214, 215, .5); 
} 

.point { 
    position: absolute; 
    display: block; 
    height: 25px; 
    width: 25px; 
    border-radius: 30px; 
    background-color: black; 
} 

Демо: http://jsfiddle.net/0qgcn2uu/

Answer 1

Pure CSS Решение Нет JQuery или JavaScript

не Выбор родительского тега не представляется возможным, даже в CSS 3.

Как спросил, да, это возможно, перемещая .point снаружи. Посмотрите здесь:

<span class="point"></span> 
<div class="caption"> 
    <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" /> 
</div> 

Рабочая Snippet

.caption { 
 
    position: relative; 
 
    overflow: hidden; 
 
    -webkit-transform: translateZ(0); 
 
} 
 

 
.caption::before { 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: transparent; 
 
    transition: background .35s ease-out; 
 
} 
 
/* This block of code is working. When i hover on my img, it gets the overlay 
 
.caption:hover::before { 
 
background: rgba(248, 214, 215, .5); 
 
} 
 
*/ 
 

 
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */ 
 
.point:hover + .caption::before { 
 
    background: rgba(248, 214, 215, .5); 
 
} 
 

 
.point { 
 
    position: absolute; 
 
    display: block; 
 
    height: 25px; 
 
    width: 25px; 
 
    border-radius: 30px; 
 
    background-color: black; 
 
    z-index: 1; 
 
}

<span class="point"></span> 
 
<div class="caption"> 
 
    <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" /> 
 
</div>

Fiddle: http://jsfiddle.net/0qgcn2uu/3/

Примечание: только выдавать остроумие h это, убедитесь, что вы прилагаете как .point, так и .caption и его содержимое внутри чего-либо с помощью position: relative, если вы используете несколько экземпляров.

Answer 2

JavaScript:

$(document).ready(function() { 
    $(".point").mouseover(function() { 
     $('.caption').addClass('captionHover'); 
    }); 

    $('.point').mouseleave(function() { 
     $('.caption').removeClass('captionHover'); 
    }); 
}); 

CSS:

.captionHover::before { 
    background: rgba(248, 214, 215, .5); 
} 

Working demo.