Css: on Hover Show and Hide Different Div's at the Same Time

CSS: On hover show and hide different div's at the same time?

http://jsfiddle.net/MBLZx/

Here is the code

 .showme{    display: none; } .showhim:hover .showme{   display : block; } .showhim:hover .ok{   display : none; }

 <div class="showhim">     HOVER ME     <div class="showme">hai</div>     <div class="ok">ok</div></div>

CSS: On hover hide div and show image at the same time?

Since element .a and element .b are right next to each other in the markup you have supplied, you probably want to use the sibling selector to target element .b. Simply change your last declaration block to:

.a:hover + .b {
  display: none;
}

Here's an updated Codepen.

Hope this helps! Let me know if you have any questions.

Using only CSS, show div on hover over another element

You can do something like this:

div {    display: none;}    a:hover + div {    display: block;}

<a>Hover over me!</a><div>Stuff shown on hover</div>

Hide element on hover of another element

Instead of + you want to use ~ combinator for hide element because + selects only next-sibling

#show {  display: none}#main:hover + #show {  display: block}#main:hover ~ #hide {  display: none}

<div id="main">  Hover me</div><div id="show">  Show me on hover</div><div id="hide">  Hide me on hover</div>

Show/Hide Different Divs Only

No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.

You could use css selectors like

#main-nav li:hover .sub-nav{}

#main-nav li:hover + .sub-nav{}

Alternatively you could use javascript

How to hover mutiple div in the same time?

You need some Javascript for that. For instance:

document.body.addEventListener( 'mouseover', function( event ) {
    if( event.target.classList.contains( 'hov' ) ) {
        [].forEach.call(document.getElementsByClassName( 'hov' ), function( elem ) {
            elem.classList.add( 'hover' );
        });
    }
});

document.body.addEventListener( 'mouseout', function( event ) {
    if( event.target.classList.contains( 'hov' ) ) {
        [].forEach.call(document.getElementsByClassName( 'hov' ), function( elem ) {
            elem.classList.remove( 'hover' );
        });
    }
});

And you need to create a css class called hover which applies the same properties in this scenario.

Demo: http://jsfiddle.net/1LkfbcLx/

Css: on Hover Show and Hide Different Div's at the Same Time