탭 메뉴의 CSS 탭 메뉴 (탭은 이미지로 표시) 이것이 가능합니까?

Question

나는이 문제를 알아낼 수 없다, 그것은 나를 괴롭 히고있다!

저는 HTML CSS를 처음 사용 합니다만, 작동시키기 위해 수많은 시간을 소비하기 전에 이것이 가능할 지 말해 줄 수 있습니까? 내가 JS에 경험 그러므로 내가 CSS와 HTML 여기에만 :)

에 고집하지있어이 ​​것은 내가 jQuery로 달성하기 위해 훨씬에게 쉬울 것

Answer 1

를 만들어 이미지입니다.

하지만 html CSS 만 사용하고 싶으므로 잘못 설명하십시오.

당신이 사용할 수있는 '가져가'선택

예를 들어

'.button1'에 대한 사용자의 마우스 오버, 모든 .children-이미지가 새로운 배경 이미지가 의미

.button1:hover .children-images { 
    background-image: url(./path-to-image); 
} 

,

그러나이 요소가 가리키는 요소의 어린이에만 영향을줍니다. 즉

, HTML과 CSS를 위의 두 개의 버튼을 감안할 때

<a class="button1"> 
    button text 
    <div class="children-images button1-images"> 
     <img src="#"/> 
     <img src="#"/> 
     <img src="#"/> 
    </div> 
</a> 

<a class="button2"> 
button text 
    <div class="children-images button2-images"> 
     <img src="#"/> 
     <img src="#"/> 
     <img src="#"/> 
    </div> 
</a> 

, 그것은 단지에 영향을 미치는 것 '.children-images.button1 - 이미지'하지 '.children-images.button2 - 이미지'

나는 그것이 의미가되기를 바란다.

그리고 html 구조가 매우 제한적이기 때문에 달성 할 수 있는지 여부는 시각적 요소에도 달려있다.

당신이 효과를 달성 할 수 없더라도, 당신은 당신이 원하지 않는 경우에 클릭을 제외하고,

Answer 2

당신 만이 쉽게 사용 CSS를 할 수있는 사이트의 다른 시각적 요구 사항을 달성 할 수있을 것 페이지 새로 고침 이 경우 프로젝트 링크에는 : 호버 만 사용할 수 있습니다. 당신은 이런 식으로 작업을 수행 할 수 있습니다

다음

당신이의 경우에는 그렇게 할 것입니다 방법은 다음과 같습니다 자바 스크립트없이 가져 : http://jsfiddle.net/bL5x9/1/

먼저 HTML :

<h1>Projects</h1> 
<ul id="main-list"> 
    <li class="main-item"> 
     <div>Project 1</div> 
     <ul class="images"> 
      <li><img src="http://lorempixel.com/100/60/sports/1"/></li> 
      <li><img src="http://lorempixel.com/100/60/sports/2"/></li> 
      <li><img src="http://lorempixel.com/100/60/sports/3"/></li> 
      <li><img src="http://lorempixel.com/100/60/sports/4"/></li> 
     </ul> 
    </li> 
    <li class="main-item"> 
     <div>Project 2</div> 
     <ul class="images"> 
      <li><img src="http://lorempixel.com/100/60/city/1"/></li> 
      <li><img src="http://lorempixel.com/100/60/city/2"/></li> 
      <li><img src="http://lorempixel.com/100/60/city/3"/></li> 
      <li><img src="http://lorempixel.com/100/60/city/4"/></li> 
     </ul> 
    </li> 
    <li class="main-item"> 
     <div>Project 3</div> 
     <ul class="images"> 
      <li><img src="http://lorempixel.com/100/60/abstract/1"/></li> 
      <li><img src="http://lorempixel.com/100/60/abstract/2"/></li> 
      <li><img src="http://lorempixel.com/100/60/abstract/3"/></li> 
      <li><img src="http://lorempixel.com/100/60/abstract/4"/></li> 
     </ul> 
    </li> 
</ul> 

다음

는 데모입니다

그리고 CSS :

h1 { 
    text-align: center; 
} 
#main-list { 
    position: relative; 
    border-top: 1px solid blue; 
    border-bottom: 1px solid blue; 
    margin: 3px 0; 
    padding: 3px 0; 
    text-align: center; 
} 
li.main-item { 
    display: inline-block; 
    width: 100px; 
} 
.images { 
    opacity:0; 
    position: absolute; 
    left: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
li:hover .images { 
    opacity:1; 
} 
.images li { 
    display: inline-block; 
    float: left; 
    width: 100px; 
    height: 60px;; 
    margin-top: 6px; 
} 

이 가진 문제는 Y이다 이미지를보기 위해 유혹을 유지해야합니다. 그것이 문제인지 확실하지 않습니다.

거기에있는 jQuery Menu 플러그인 수천 경우 귀하의 경우에 나는 우리에게 하나뿐입니다.