마우스를 올리면 이미지 효과를 표시하기 위해 순수 CSS를 사용하는 예를 공유하세요.

여기에서는 마우스 호버에 그림을 표시하는 효과를 얻기 위해 순수 CSS를 사용하는 예를 추천하고 싶습니다. 마우스를 tr 태그로 이동하여 호버를 추가하는 가장 간단한 방법을 보여줍니다.

최근에 마우스를 위로 올리는 효과를 이용한 네트워크 디스크 프로젝트를 진행하고 있는데 오늘은 주로 공유하겠습니다. 순수 CSS로 이 효과를 얻는 방법!

효과는 다음과 같습니다.

html 코드

<table id="filelist" style="width:100%;">
   <tbody>
        <tr>
            <td class="filename ui-draggable ui-droppable"  width="30%;">
                <p class="name">
                    <span class="fileactions">
                        <a href="#" class="action action-download" data-action="Download" original-title="">
                            <img  class="svg" src="svg/download.svg" alt="마우스를 올리면 이미지 효과를 표시하기 위해 순수 CSS를 사용하는 예를 공유하세요." >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share permanent" data-action="Share" original-title="">
                            <img  class="svg" src="svg/public.svg" alt="마우스를 올리면 이미지 효과를 표시하기 위해 순수 CSS를 사용하는 예를 공유하세요." >
                            <span>已共享</span>
                        </a>
                    </span>
                </p>
            </td>
            <td class="filesize" style="color:rgb(-4780,-4780,-4780)">70.3 MB</td>
            <td class="date">
                <span class="modified" title="September 29, 2014 14:45" style="color:rgb(0,0,0)">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>

        <tr >
            <td class="filename ui-draggable ui-droppable"  width="30%;">
                <p class="name" >
                    <span class="fileactions">
                        <a href="#" class="action action-download" data-action="Download">
                            <img  class="svg" src="svg/download.svg" alt="마우스를 올리면 이미지 효과를 표시하기 위해 순수 CSS를 사용하는 예를 공유하세요." >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share" data-action="Share">
                            <img  class="svg" src="svg/share.svg" alt="마우스를 올리면 이미지 효과를 표시하기 위해 순수 CSS를 사용하는 예를 공유하세요." >
                            <span>分享</span>
                        </a>
                    </span>
                </p>
            </td>
            <td class="filesize" style="color:rgb(159,159,159)">762 kB</td>
            <td class="date">
                <span class="modified" style="color:rgb(0,0,0)" original-title="September 29, 2014 16:36">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>
        </tbody>
</table>

위 코드를 프로젝트에서 직접 복사했는데, 거기에 중복 CSS가 많을 수 있으므로 모두가 일반 코드를 살펴보세요!

필수 CSS

그림의 효과, 일반적인 아이디어는 처음에 불투명도=0으로 설정한 다음 마우스를 위로 움직여 표시하는 것입니다. .

코드는 다음과 같습니다.

#filelist a.action {   
    display: inline;   
    padding: 18px 8px;   
    line-height: 50px;   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   
    filter: alpha(opacity=0);   
    opacity: 0;   
    display:none;   
}   
#filelist tr:hover a.action , #filelist a.action.permanent{   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   
    filter: alpha(opacity=50);   
    opacity: .5;   
    display:inline;   
}   
#filelist tr:hover a.action:hover {   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";   
    filter: alpha(opacity=100);   
    opacity: 1;   
    display:inline;   
}

위 코드는 대략적인 코드입니다!

css 스킬 분석

tr 마우스를 위로 올리면 아래 a 태그를 보면 이렇게 선택할 수 있음을 알 수 있습니다. #filelist tr:hover a.action tr 및 마우스를 위로 이동하면 tr 아래의 a 태그에서 마우스를 위로 이동하는 효과도 유용합니다. #filelist tr:hover a.action:hover

jquery에는 attr이 있습니다. , 활성 태그의 속성인 CSS는 jquery와 동일할 수도 있습니다. 유사한 옵션입니다.

예를 들어

<a href="#"  data-action="Rename"  class="action"></a>

아래 a 태그에서 다음과 같은 스타일을 작성할 수 있습니다.

 a.action[data-action="Rename"]{   
    padding: 16px 14px 17px !important;   
    position: relative;   
    top: -21px;   
}

읽은 후 이번 글, 뭔가 얻으셨나요? 이 글을 통해 CSS에 대한 이해가 좀 더 깊어졌는지 궁금합니다!

위 내용은 마우스를 올리면 이미지 효과를 표시하기 위해 순수 CSS를 사용하는 예를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!