jquery에서 div 내부의 요소에 액세스하여 exanding div를 투명하게 만드는 방법

Question

사용자가 마우스를 가져갈 때 특정 div가 확장되기를 원합니다.

 <td><h4>Like Football</h4></td> 

div 태그 내부의 요소에 액세스하는 방법이 불분명합니다. 또한 확장 div의 배경이 Fifa 12가 표시되는 this website 에서처럼 특정 정도까지 투명 해지기를 바랍니다. 도와주세요.

<div> 
    <a href=""> 
    <img src="images/fifa.jpg" /></a> 
</div> 

<div class="wrapper"> 
    <table> 
     <tr> 
      <td> 
       <img src="images/arrow.jpg" height="28" width="28"/ > 
      </td> 
      <td> 
       <h4>Like Football</h4> 
      </td> 
     </tr> 
    </table> 

    <div class="wrapperhover"> 

     <p class="wrappercontent" id="p"> 
      <span>Download FIFA 12 on Xperia™!</span> 
      <a href="" onclick=""><span>Find more</span></a> 
     </p> 
    </div> 
</div> 

CSS

.wrapper 
{ 
     background-color:Black; 
     color:White; 
     width:245px; 
     height:100px; 
     margin-top:-100px; 
     position:absolute;  
} 

.wrapperhover 
{ 
    height:100px; 
} 

JQUERY

$ (문서) .ready (함수() {나는 바이올린 here을했습니다

$(".wrapperhover").hide(); 

    $(".wrapper").hover(function() { 
     $(".wrapperhover").show(); 
     var contentHeight = 0; 
     $(this).children().each(function() { 
      contentHeight += $(this).height(); 
     }); 
     $(this).animate({ 
     height: '150px', 
     marginTop: "-150" 
     }, 300); 
    }, function() { 
     $(this).animate({ 
      height: '100px', marginTop: "-100" 
     }, 300); 
     $(".wrapperhover").hide(); 
    }); 

}); 

Answer 1

. 시험을 본 후 당신이 찾고있는 것 중 일부는 내가 원하는 것에 가깝다고 생각합니다. 아마도 그라디언트 CSS의 일부를 조정해야하지만 생각은 거기에 있다고 생각합니다. 이것은 모든 브라우저에서 작동합니다. 언급 한 사이트에는 투명도가 추가되지 않았습니다. 처음부터 있습니다. 따라서 .wrapper div에 .gradient 클래스를 추가했습니다. 여기에 코드가 있습니다 :

<div class="wrapper gradient"> 
     <table> 
      <tr> 
       <td> 
        <img src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="28" width="28"/ > 
       </td> 
       <td> 
        <h4> Like Football</h4> 
       </td> 
      </tr> 
     </table> 

     <div class="wrapperhover"> 
      <p class="wrappercontent" id="p"> 
       <span>Download FIFA 12 on Xperia™!</span> 
       <a href="" onclick=""><span>Find more</span></a> 
      </p> 
     </div> 
    </div> 

js는 우리가 CSS를 사용할 수 있기 때문에 더 이상이 답변과 관련이 없습니다. 당신이 js를 볼 필요가 있다면 위의 바이올린을 참조하십시오. 다음은 this 그라디언트 편집기를 사용하여 추가 한 CSS입니다.

.gradient 
    { 
     background: -moz-linear-gradient(top, rgba(40,52,59,1) 21%, rgba(40,52,59,0.82) 35%, rgba(130,140,149,0.3) 76%, rgba(181,189,200,0) 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,rgba(40,52,59,1)), color-stop(35%,rgba(40,52,59,0.82)), color-stop(76%,rgba(130,140,149,0.3)), color-stop(100%,rgba(181,189,200,0))); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* IE10+ */ 
     background: linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28343b', endColorstr='#00b5bdc8',GradientType=0); /* IE6-9 */ 
    }