Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus

Hier möchte ich Ihnen ein Beispiel für die Verwendung von reinem CSS empfehlen, um den Effekt der Anzeige von Bildern beim Bewegen der Maus über das Tr-Tag zu erzielen klar. Freunde, die es brauchen, können sich darauf beziehen.

Ich arbeite kürzlich an einem Netzwerkfestplattenprojekt, das den Effekt der Mausbewegung nach oben nutzt wie man diesen Effekt mit reinem CSS erreicht!

Der Effekt ist wie folgt:

HTML-Code

<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="Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus" >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share permanent" data-action="Share" original-title="">
                            <img  class="svg" src="svg/public.svg" alt="Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus" >
                            <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="Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus" >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share" data-action="Share">
                            <img  class="svg" src="svg/share.svg" alt="Teilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus" >
                            <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>

Ich habe den obigen Code direkt aus dem Projekt kopiert , es kann sein, dass es viele redundante CSS gibt, jeder schaut sich nur den allgemeinen Code an!

Unverzichtbares CSS

Der Effekt im Bild, die allgemeine Idee besteht darin, ihn zu Beginn auf Deckkraft = 0 zu setzen und dann die Maus nach oben zu bewegen, um ihn anzuzeigen .

Der Code lautet wie folgt:

#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;   
}

Das Obige ist die ungefähre Essenz des Codes!

CSS-Fähigkeitsanalyse

Bewegen Sie die tr-Maus nach oben, und das a-Tag unten zeigt, dass Sie Folgendes auswählen können: #filelist tr:hover a.action Tr hinzufügen und Bewegen Sie die Maus nach oben, um zu schweben. Dann ist der Effekt, die Maus nach oben auf das Tag a unter tr zu bewegen, auch nützlich. Schreiben Sie wie folgt: #filelist tr:hover a.action:hover

Es gibt attr in jquery , das Attribut des aktiven Tags, CSS kann auch dasselbe sein wie jquery Ähnliche Optionen.

Zum Beispiel können wir für das Tag a unten

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

den Stil wie folgt schreiben:

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

Sehen Sie: Hat Ihnen dieser Artikel etwas gebracht? Ich frage mich, ob Sie durch diesen Artikel ein besseres Verständnis von CSS erhalten!

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel für die Verwendung von reinem CSS zum Anzeigen von Bildeffekten beim Bewegen der Maus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!