이 글의 예시에서는 js 마우스를 올렸을 때 마스크 레이어를 표시하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. html 페이지 코드: 코드 복사 코드는 다음과 같습니다. | ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ JS 코드: 코드 복사 코드는 다음과 같습니다. <br> $(함수 () { //마스크 레이어, 마우스를 위로 올리면 높이가 바뀌고 투명해짐 var $site_li = $(".site-tag li"); $site_li.hover(함수 () { <p> var indexs = $site_li.index(this); </p> <div class="codetitle"> $(this).css("높이", "90").find(".tag-tit").css("top", "30").css("color", "#fff"); 🎜> //모든 li 요소 중 현재 클릭된 li 요소의 인덱스를 가져옵니다 <span> > ’ ’ 아웃 아웃. $(this).prev().css("height", "30") <a style="CURSOR: pointer" data="39444" class="copybut" id="copybut39444" onclick="doCopy('code39444')"> $(this).next().css("height", "30") <u> }, 기능 () { $site_li.css("height", "50") </u> }); }); </a> </span><br> CSS代码： <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="17418" class="copybut" id="copybut17418" onclick="doCopy('code17418')"><u>复主代码</u></a></span> 代码如下:</div> <div class="codebody" id="code17418">ul li{ list-style:none;} <br> .site-tag{너비:200px; 오버플로:숨김; z-색인:5;} <br> .site-tag li{ 위치:상대적; 너비:200px; 높이:50px; 여백 하단:1px; 오버플로:숨김; <br> 전환:높이 0.5초 여유; -webkit-transition:높이 0.5초 용이성; <br> -moz-transition:높이 0.5초 용이함; -o-transition:높이 0.5초 용이성;} <br> .site-tag li a { 색상: #666; 글꼴 크기: 16px; 글꼴 두께: 굵게; 줄 높이: 50px;} <br> .site-tag li i{ 디스플레이:블록; 높이:90px; 배경 위치:중심 중심; <br> 불투명도:0.3; 필터:알파(불투명도=3); /*设置透명도*/ <br> -webkit-transition:불투명도 0.5 용이성; /**/ <br> -webkit-filter:회색조(60%); /**/ <br> } <br> .site-tag li:hover i { 불투명도:0.9; -webkit-filter:회색조(0%); 전환:불투명도 0.5초 완화;} <br> .tag-tit{ 디스플레이:블록; 높이:100px; 너비:700px; 색상:#666; 글꼴 크기:14px;} <br> .site-tag li .tag-tit{ 위치:절대; 상단:0px; 왼쪽:10px; text-shadow:1px 1px 1px rgb(0,0,0,0.1);} <br> a:hover .tag-tit{ text-shadow:1px 1px 1px rgb(0,0,0,0.5);}</div> <p>希望本文所述对大家의 javascript는 程序设计有所帮助。</p> </div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
