純css實現滑鼠置上展開顯示全部內容效果-css教學-PHP中文網

首頁

web前端

css教學

純css實現滑鼠置上展開顯示全部內容效果

高洛峰

Nov 24, 2016 am 11:51 AM

css

純css實現滑鼠置上展開顯示全部內容效果

一般實現這樣的效果都會選擇用js...簡單明了....jsjs稍弱....cssjs... .另加上工作需要...所以就寫了一個純css的...

代碼如下：

<!DOCTYPE <a href="http://www.php1.cn/">html</a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{padding:0;margin:0;}
ul{list-style:none;}
 
 
.lun{padding:30px;float:left;font:12px/26px "宋体";}
.lun li{width:130px;background:#ffeab8;float:left;}
.lun li img{width:130px;height:150px;float:left;}
.lun li.ont{background:#cff0fc;_height:130px;}
.lun li a{display:block;color:#3d203f;text-decoration:none;padding:10px;width:110px;height:130px !important;_height:130px;position:relative;left:0;top:0;z-index:10;float:left;}
.lun li a b{color:#cc0b39;font-size:14px;padding-bottom:5px;display:block;font-size:14px;}
.lun li a div,.lun li a p{display:none;}
.lun li a:hover{display:block;text-decoration:none;height:100%;position:relative;z-index:1000 !important;}
.lun li a:hover div{display:block;color:#3d203f;width:150px;padding:10px;position:absolute;left:-20px;top:-20px;background:#ffeab8;cursor:pointer;box-shadow:1px 1px 10px #333;}
.lun li a:hover p{display:block;color:#3d203f;background:#cff0fc;position:absolute;left:-10px;top:-10px;width:150px;padding:10px;box-shadow:1px 1px 10px #333;cursor:pointer;}
</style>
<title>纯<a href="http://www.php1.cn/category/72.html">css</a>实现鼠标置上展开显示全部内容</title>
</head>
 
 
<body>
<ul class="lun clearfix f12 lh24">
<li><img  src=http://up.2cto.com/2013/0913/20130913035326256.jpg" / alt="純css實現滑鼠置上展開顯示全部內容效果" ></li>
<li><a href="http://www.php1.cn/">
<p> </p>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

' CSS4”更新Apr 11, 2025 pm 12:05 PM

自從我第一次介紹了CSS4面中的事情以來，就已經進行了更多的討論。我將在這裡從其他人那裡匯集我最喜歡的想法。有

三種代碼Apr 11, 2025 pm 12:02 PM

每次啟動一個新項目時，我都會將我正在查看的代碼分為三種類型，或者如果您願意的話。我認為這些類型可以應用於

https很容易！Apr 11, 2025 am 11:51 AM

我對公開哀悼HTTPS的複雜性感到內gui。過去，我從第三方供應商那裡購買了SSL證書，並且遇到了麻煩

HTML數據屬性指南Apr 11, 2025 am 11:50 AM

您想了解的有關HTML，CSS和JavaScript中數據屬性的所有信息。

了解JavaScript中的不變性Apr 11, 2025 am 11:47 AM

如果您以前從未在JavaScript中使用不變性，則可能會發現很容易將其與為新值或重新分配分配變量的混淆。

具有現代CSS功能的定製樣式表單輸入Apr 11, 2025 am 11:45 AM

如今，可以在語義上且易於訪問的同時構建自定義的複選框，無線電按鈕和切換開關。我們甚至不需要

腳註字符Apr 11, 2025 am 11:34 AM

有特殊的超級數字字符有時非常適合腳註。他們在這裡：

如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Dreamweaver Mac版

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。