CSS hover on divs will show or hide other divs

Question

I'm sure this is possible but I can't get it to work, I want to create a banner with 4 slides and 4 buttons underneath it.

The first slide should show initially until you hover over say 'button 2' and it hides slides 1, 3 & 4 and displays slide 2 and holds that slide there (mouse off) until another button is hovered over and it will then show the corresponding slide and hide the rest.

I want to try and do all this in HTML/CSS without the need for jQuery if it is possible.

My code:

<style type="text/css">
.banners {width:100%; max-width:1004px; height:100%; max-height:546px; overflow: hidden;}
#slide1 {width:100%; height:100%; background:yellow; display:block;}
#slide2 {width:100%; height:100%; background:blue; display:none;}
#slide3 {width:100%; height:100%; background:green; display:none;}
#slide4 {width:100%; height:100%; background:red; display:none;}
#bannerbutton1 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:yellow;}
#bannerbutton2 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:blue;}
#bannerbutton3 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:green;}
#bannerbutton4 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:red;}
</style>


<div class="banners">
    <div id="slide1">
    </div>
    <div id="slide2">
    </div>
    <div id="slide3">
    </div>
    <div id="slide4">
    </div>
</div>

<a id="bannerbutton1" href="">
BANNER 1
</a>
<a id="bannerbutton2" href="">
BANNER 2
</a>
<a id="bannerbutton3" href="">
BANNER 3
</a>
<a id="bannerbutton4" href="">
BANNER 4
</a>

It might be simple and I might be missing something but help would be greatly appreciated.

Answer 1

Yes, you can do it without JavaScript or JQuery, but only the hover thing. If you want to stay on image when it's not on hover, then you need use JavaScript or JQuery. That's because css selector is not active when your mouse is out of the button.

Whatever, this is my code for you, pure css3. It works fine for the hover and show the image while you do hover at the button.

HTML

<div class="slider"> 
        <input type="radio" id="control1" name="controls" checked="checked"/>
        <label for="control1"></label>
        <input type="radio" id="control2" name="controls"/>
        <label for="control2"></label>
        <input type="radio" id="control3" name="controls"/>
        <label for="control3"></label>
        <input type="radio" id="control4" name="controls"/>
        <label for="control4"></label>
        <input type="radio" id="control5" name="controls"/>
        <label for="control5"></label>
        <div class="sliderinner">
            <ul>
                <li>
                    <img src="bea.jpg" />
                    <div class="description">
                        <div class="description-text">
                            <h2>Title 1</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="bea.jpg" />
                    <div class="description">
                        <div class="description-text">
                            <h2>Title 2</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="bea.jpg" />
                    <div class="description">
                        <div class="description-text">
                            <h2>Title 3</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="bea.jpg" />
                    <div class="description">
                        <div class="description-text">
                            <h2>Title 4</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="bea.jpg" />
                    <div class="description">
                        <div class="description-text">
                            <h2>Title 5</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

CSS

h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.slider {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
    position: relative;
}

.sliderinner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.sliderinner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.sliderinner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

.sliderinner>ul>li>img {
    margin: auto;
    height: 100%;
}

.slider input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

.slider label {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color:#ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

.slider input[type=radio]#control1:hover~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:hover~label[for=control2] { background-color: #333; }
.slider input[type=radio]#control3:hover~label[for=control3] { background-color: #333; }
.slider input[type=radio]#control4:hover~label[for=control4] { background-color: #333; }
.slider input[type=radio]#control5:hover~label[for=control5] { background-color: #333; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:hover~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:hover~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:hover~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:hover~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:hover~.sliderinner>ul { left: -400% }

.description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-family:Archivo Narrow;
    z-index: 1000;
}
.description-text {
    background-color: rgba(0,0,0,.8);
    padding:10px;
    top: 0;
    z-index: 4;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: #fff;
}

Answer 2

With CSS you can hide/show using child and sibling selectors, that is true. But even with sibling selectors the :hover elements must come before the effected element.

If you changed your structure, you could achieve a hover switch for hover states of the buttons using the :hover pseudo class and the general sibling selector ~. Here is an example:

http://jsfiddle.net/xxgLzgax/

Now using smart positioning you might be able to re-position this as you need but your problem comes when you want to keep the state of the last hovered element. CSS is purely for styling, and even though it does cater for pseudo states of elements (inasmuch as their style), it is not able to do such a thing. :hover is for style on hover nothing else.

So as other posters have stated, you would need to use JS/JQuery to do this. Something probably along the lines of:

$( "button" ).on("mouseenter", function() {
       $('class/ID to show').addClass( "hover" ).siblings().removeClass( "hover" );
});

But regardless of the JS solution to keep the state the same and make this particular setup work, you would have to use JS. Also if you do use JS to do this, I suggest using a class to toggle this, keeping the CSS and JS separate.

Answer 3

Such things must be done using JavaScript. Hovering and hiding elements with pure CSS is only possible if the elements supposed to be shown/hidden are child elements of those, which you hover with your mouse. For example:

<div class="hover-to-hide-sub-div">
  <div class="hide-me"></div>
</div>

and in the CSS:

div.hover-to-hide-sub-div:hover div.hide-me { display: none; }

If this hierarchy is not given, JS is needed.