Два элемента парить в то же время

Question

Глядя на прикрепленном jsfiddle:

http://jsfiddle.net/muncherelli/dLsgokva/

У меня есть три ссылки: Связанный текст ссылка, ссылка взаимосвязанного изображения, и текст ссылки не связаны. Связанные ссылки переходят на один URL-адрес, а не связанная ссылка идет на другой URL-адрес.

Если вы в настоящее время наводите курсор на отдельные три элемента, каждый из них будет парить сам по себе. Я хотел бы, чтобы связанный образ и связанная с ними ссылка включались в «зависание», когда любой из них зависал. Не связанная ссылка не должна наводиться, когда вы наводите курсор на что-либо другое, кроме несвязанной ссылки. Есть ли собственный способ CSS для этого? У меня также есть jQuery, доступный для использования.

Обратите внимание, что на одной странице будет несколько таких контейнеров с разными URL-адресами. Им нужно будет работать независимо, так как они будут иметь разные ссылки.

Вот мой HTML:

<div class="container rounded-bg"> 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
    <div class="content"> 
     <div class="content-top"> 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
     </div> 
     <div class="content-bottom"> 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
     </div> 
    </div> 
</div> 
<br /><br /> 
<div class="container rounded-bg"> 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
    <div class="content"> 
     <div class="content-top"> 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
     </div> 
     <div class="content-bottom"> 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
     </div> 
    </div> 
</div> 
<br /><br /> 
<div class="container rounded-bg"> 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
    <div class="content"> 
     <div class="content-top"> 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
     </div> 
     <div class="content-bottom"> 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
     </div> 
    </div> 
</div> 
<br /><br /> 
<div class="container rounded-bg"> 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
    <div class="content"> 
     <div class="content-top"> 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
     </div> 
     <div class="content-bottom"> 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
     </div> 
    </div> 
</div> 

И мой CSS:

body { 
    font-family: sans-serif; 
} 
div.container { 
    position: relative; 
    background-color: #000; 
    display: inline-block; 
    height: 300px; 
    width: 400px; 
} 
div.content { 
    height: 100%; 
    width: 100%; 
} 
div.content-top { 
    position: absolute; 
    right: 20px; 
    top: 20px; 
} 
div.content-top { 
    position: absolute; 
    right: 20px; 
    top: 20px; 
} 
div.content-bottom { 
    position: absolute; 
    left: 20px; 
    bottom: 0; 
} 
.related-img:hover { 
    opacity: .9; 
} 
a.unrelated { 
    background-color: #ccc; 
    background-color: rgba(0,0,0,0.4); 
    color: #fff; 
    font-size: 13px; 
    padding: 5px 15px; 
    text-transform: uppercase; 
} 
a.unrelated:hover { 
    background-color: rgba(0,0,0,0.7); 
} 
a.related { 
    text-decoration: none; 
    color: #999; 
} 
a.unrelated { 
    text-decoration: none; 
} 
a.related:hover { 
    color: #000; 
} 
.effects { 
    -moz-transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
    -ms-transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
    -o-transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
    -webkit-transform: translateZ(0px); 
    -webkit-transition: background-color 500ms, color 500ms ease-out; 
    transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
} 
.rounded { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 
.rounded-bg { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 

Answer 1

Я не уверен, если это возможно в чистом CSS, так как CSS не имеет родительского селектора. Предполагая, что из тегов, что решение JQuery является приемлемым, это будет работать: (обратите внимание на изменения в CSS .related-img.active и .related.active)

$('.container').on('mouseenter', '.related, .related-img', function(){ 
 
    $link = $(this).closest('.container').find('.related, .related-img').addClass('active'); 
 
}); 
 
$('.container').on('mouseleave', '.related, .related-img', function(){ 
 
    $link = $(this).closest('.container').find('.related, .related-img').removeClass('active'); 
 
});

body { 
 
    font-family: sans-serif; 
 
} 
 
div.container { 
 
    position: relative; 
 
    background-color: #000; 
 
    display: inline-block; 
 
    height: 300px; 
 
    width: 400px; 
 
} 
 
div.content { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
div.content-top { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 20px; 
 
} 
 
div.content-top { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 20px; 
 
} 
 
div.content-bottom { 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 0; 
 
} 
 
.related-img.active{ 
 
    opacity: .9; 
 
} 
 
a.unrelated { 
 
    background-color: #ccc; 
 
    background-color: rgba(0,0,0,0.4); 
 
    color: #fff; 
 
    font-size: 13px; 
 
    padding: 5px 15px; 
 
    text-transform: uppercase; 
 
} 
 
a.unrelated:hover { 
 
    background-color: rgba(0,0,0,0.7); 
 
} 
 
a.related { 
 
    text-decoration: none; 
 
    color: #999; 
 
} 
 
a.unrelated { 
 
    text-decoration: none; 
 
} 
 
a.related.active{ 
 
    color: #000; 
 
} 
 
.effects { 
 
    -moz-transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
 
    -ms-transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
 
    -o-transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
 
    -webkit-transform: translateZ(0px); 
 
    -webkit-transition: background-color 500ms, color 500ms ease-out; 
 
    transition: background-color 500ms, opacity 500ms, color 500ms ease-out; 
 
} 
 
.rounded { 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
} 
 
.rounded-bg { 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container rounded-bg"> 
 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
 
    <div class="content"> 
 
     <div class="content-top"> 
 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
 
     </div> 
 
     <div class="content-bottom"> 
 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
 
     </div> 
 
    </div> 
 
</div> 
 
<br /><br /> 
 
<div class="container rounded-bg"> 
 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
 
    <div class="content"> 
 
     <div class="content-top"> 
 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
 
     </div> 
 
     <div class="content-bottom"> 
 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
 
     </div> 
 
    </div> 
 
</div> 
 
<br /><br /> 
 
<div class="container rounded-bg"> 
 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
 
    <div class="content"> 
 
     <div class="content-top"> 
 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
 
     </div> 
 
     <div class="content-bottom"> 
 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
 
     </div> 
 
    </div> 
 
</div> 
 
<br /><br /> 
 
<div class="container rounded-bg"> 
 
    <a href="#related-url"><img src="http://placehold.it/400x300?text=.related-img" class="related-img effects rounded" /> 
 
    <div class="content"> 
 
     <div class="content-top"> 
 
      <a href="#unrelated-url" class="unrelated effects">Unrelated Link</a> 
 
     </div> 
 
     <div class="content-bottom"> 
 
      <a href="#related-url" class="related effects"><h1>Related Link</h1></a> 
 
     </div> 
 
    </div> 
 
</div>