호버 오버 테이블을 다른 div에 적용하지 않으려면 어떻게해야하나요?

Question

이 세 부분으로 질문 :

1. 가 어떻게 호버 오버 사업부 (즉, 페이지 랩에) 사업부 내에있는 다른 div에 영향을 미치지을 할 수 ? 공중에 얹히면 모든 것이 아래로 미끄러 져 나옵니다.

2. 버튼 외부의 모든 항목이 마우스 오버 효과를 유발하지 않도록하려면 어떻게해야합니까?

3. 텍스트 주위의 테두리를 제거하려면 어떻게해야합니까?

여기는 jsfiddle입니다.

HTML :

<div class="page"> 

    <div class="text"> 
     <span class="title">Hover Here</span> 
     <span class="info">This text should hover over the images, not effect the bottom images <br/>text <br/>text <br/>text <br/>text <br/>text <br/>text <br/>text <br/>text <br/>text 
     </span> 
    </div> 
    <div class="image"> 
     <img... /> 
     <img... /> 
     <img... /> 
    </div> 
</div> 

CSS : 텍스트 클래스의 테두리를 제거하려면

html, body { 
    margin: 0; 
    padding: 0; 
    width:100%; 
    height:100%; 
} 
body { 
    font-family: helvetica; 
    font-size: 18px; 
    line-height: 26px; 
} 
div.page { 
    width:80%; 
    max-width:960px; 
    height:100%; 
    background: #C2DAB6; 
    margin:0 auto; 
} 
div.text span.title { 
    display:inline; 
} 
div.text:hover span.title { 
    display:none; 
} 
div.text span.info { 
    display:none; 
} 
div.text:hover span.info { 
    display:inline; 
} 
.image img { 
    width: 60%; 
    height: auto; 
    padding-top: 10px; 
} 

Answer 1

코드 다음 사용은 할

<table border="0"> 


.text{ 
     position: absolute; 
    background: #fff; 
     z-index: 9999; 
    } 
    .image{ 
     position:relative; 
    top:20px; 
    } 

요 유튜브에서 확인할 수 있습니다 http://jsfiddle.net/nikkirs/prven5sy/6/