Ссылка на изображение, непрозрачность наведите на изображение

Question

У меня есть изображение, на котором у меня есть непрозрачность, если я наведите курсор на изображение, сделанное с помощью CSS.

У меня также есть ссылка, отображающаяся поверх изображения, если пользователь наводил изображение, чтобы показать ссылку Im, используя jQuery.

Но когда я нависаю над ссылкой, которая появляется, когда я нахожу изображение, весь эффект непрозрачности и ссылка ведет себя неаккуратно, когда я перемещаю курсор по ссылке.

Мое объяснение состоит в том, что это происходит потому, что, когда у меня есть указатель на ссылку, Im фактически больше не над изображением. Но как я могу решить этот самый простой способ? Чтобы получить правильную связь, и непрозрачность изображения, которое будет установлено, когда у меня есть указатель на ссылку.

Мой код выглядит следующим образом: HTML

<div class="col-md-2 category-product"> 
    <img src="image1.png" data-img="product-image-1"> 
    <div class="category-product-overview"><a href="#">Overview</a></div> 
</div> 
<div class="col-md-2 category-product"> 
    <img src="image2.png" data-img="product-image-2"> 
    <div class="category-product-overview"><a href="#">Overview</a></div> 
</div> 

CSS

.category-product { 
    width: 205px; 
    background-color: #fff; 
    padding: 16px 0 0 0; 
    margin: 10px 10px 0 0; 
} 

.category-product-overview { 
    position: absolute; 
    z-index: 10; 
    display: none; 
    top: 35%; 
    bottom: 65%; 
    left: 29%; 
} 

.category-product-overview a { 
    padding: 9px 16px 9px 16px; 
    background-color: #41a5e0; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; /* future proofing */ 
    -khtml-border-radius: 3px; /* for old Konqueror browsers */ 
    color: #fff; 
} 

.category-product-overview a:hover { 
    color: #348dc1; 
    text-decoration: none; 
} 

.category-product img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 

.category-product img:hover { 
    opacity: 0.5; 
} 

JQuery

$('div.category-product > img').hover(function() { 
    $(this).next('.category-product-overview').show(); //hover in 
}, function() { 
    $(this).next('.category-product-overview').hide(); //hover out 
}); 

Answer 1

Изменить

.category-product img:hover { 
    opacity: 0.5; 
} 

в

.category-product:hover img { 
    opacity: 0.5; 
} 

этак :hover прикрепляется к родителю как изображения, так и обзор, так что это не имеет значения, одна мышь закончена, пока она находится внутри категории родителей.

и Javascript

$('.category-product').hover(function() { 
    $('.category-product-overview', this).show(); 
}, function() { 
    $('.category-product-overview', this).hide(); 
});