用css显示和隐藏div-Displayandhidedivwithcss

32  

You need

你需要

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Updated demo at http://jsfiddle.net/gaby/n5fzB/2/

更新了http://jsfiddle.net/gaby/n5fzB/2/的演示

The problem in your original CSS was that the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden for all .a elements.

原始CSS中的问题是，在css选择器中，启动一个全新的选择器。它没有合并..所以#f：hover~.abc，.a表示#f：hover~.abc和.a。您将其设置为display：none，因此始终将其设置为对所有.a元素隐藏。

36  

To hide an element, use:

要隐藏元素，请使用：

display: none;
visibility: hidden;

To show an element, use:

要显示元素，请使用：

display: block;
visibility: visible;

The difference is:

不同之处是：

Visibility handles the visibility of the tag, the display handles space it occupies on the page.

可见性处理标记的可见性，显示处理它在页面上占用的空间。

If you set the visibility and do not change the display, even if the tags are not seen, it still occupies space.

如果设置可见性并且不更改显示，即使看不到标记，它仍占用空间。

5  

you can use any of the following five ways to hide element, depends upon your requirements.

您可以使用以下五种方法中的任何一种来隐藏元素，具体取决于您的要求。

Opacity

.hide {
  opacity: 0;
}

Visibility

.hide {
   visibility: hidden;
}

Display

.hide {
   display: none;
}

Position

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

clip-path

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

To show use any of the following: opacity: 1; visibility: visible; display: block;

要显示以下任何一项：不透明度：1;能见度：可见;显示：块;

Source : https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

资料来源：https：//www.sitepoint.com/five-ways-to-hide-elements-in-css/

1  

Html Code :

Html代码：

    Show First content!
    

    Show Second content!!
    
Default Content
    
First content
    
Second content

Script code:

脚本代码：

$(document).ready(function() {
    $("#f").mouseover(function(){
        $('.a,.abc').addClass('hideDiv');
        $('.ab').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });

    $("#s").mouseover(function(){
        $('.a,.ab').addClass('hideDiv');
        $('.abc').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });
});

css code:

css代码：

.hideDiv
{
    display:none;
}