button hide

버튼 Hover 상태일때 다른 버튼을 Show/Hide 시켜보자.

1. #a 버튼 Hover 상태일때, #c 버튼을 보여준다.

#a:hover ~ #c {
    display: inline-block;
}

~ 선택자는 일반 형제 선택자로 ~ 뒤에 있는 요소들을 모두 선택한다.
+ 선택자는 인접 형제 선택자로 + 뒤에 있는 요소가 앞에 있는 요소에 인접한 경우에만 유효하다.

 A 요소 +  B 요소

주의할것은 html body에서 A요소가 먼저 와야 정상적으로 실행된다.

<button class="button" id="a">Button1</button>
<button class="button" id="b">Button2</button>


<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}


#b , #c {
    display: none;
}


#a:hover ~ #c {
    display: inline-block;
}

</style>
</head>
<body>

<button>Default Button</button>
<button class="button" id="a">Button1</button>
<button class="button" id="b">Button2</button>
<button class="button" id="c">Button3</button>

</body>
</html>

실행:




2. #a 버튼 Hover 상태일때, .x-group 버튼을 보여준다.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.x-group {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.x-group {
    display: none;
}

#x:hover ~ .x-group {
    display: inline-block;
}

</style>
</head>
<body>

<button>Default Button</button>
<button class="button" id="x">Button1</button>
<button class="x-group" id="y">Button2</button>
<button class="x-group" id="z">Button3</button>

</body>
</html>

실행:



참조)
선택자:
http://poiemaweb.com/css3-selector
http://www.clearboth.org/css3_1_by_isdn386/