Two elements hover at the same time

Question

Looking at the attached jsfiddle:

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

I have three different links: A related text link, a related image link, and an unrelated text link. The related links go to one url, and the unrelated link goes to a different url.

If you currently hover over the individual three elements, each one will hover on its own. I would like the related image and the related link to both go into "hover" when either of them are hovered. The unrelated link should not hover when you hover over anything else but the unrelated link. Is there a native CSS way to do this? I also have jQuery available for use.

Please note that there will be several of these containers on one page, each with different URLs. They would need to be able to work independently since they will be going to different links.

Here is my HTML:


    
    
        
            Unrelated Link
        
        
            Related Link
        
    





    
    
        
            Unrelated Link
        
        
            Related Link
        
    





    
    
        
            Unrelated Link
        
        
            Related Link
        
    





    
    
        
            Unrelated Link
        
        
            Related Link

And my 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;
}

Wesley Smith · Accepted Answer

I'm not sure if it is possible in pure CSS since CSS does not have a parent selector. Assuming from your tags that a jQuery solution is acceptable, this will work: (note the changes to the CSS .related-img.active and .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;
}



    
    
        
            Unrelated Link
        
        
            Related Link
        
    





    
    
        
            Unrelated Link
        
        
            Related Link
        
    





    
    
        
            Unrelated Link
        
        
            Related Link
        
    





    
    
        
            Unrelated Link
        
        
            Related Link

Two elements hover at the same time

Answers (1)

Related Questions