jquery滑鼠hover事件文字內容滑動遮罩效果
效果圖
=>
第一步,首先引入jquery.min.js檔案
第二步,寫html程式碼
<div class="item-wrap">
<div class="item">
<ul>
<li>
<img src="images/class1.jpg" />
<div class="text-con">
<p class="title">標題</p >
</div>
</li>
</ul>
</div>
</div>
第三步,寫css程式碼
<style>
body,p,ul,li{
margin: 0;
padding: 0;
}
.item-wrap .item ul {
overflow:hidden;
}
.item-wrap .item ul li{
width: 297px;
height: 198px;
position: relative ;
float: left;
overflow:hidden;
cursor: pointer;
}
.item-wrap .item ul li .text-con{
width: 297px;
height: 30px;
background: rgba(0,0,0,.5);
position: absolute;
left: 0;
bottom:0;
}
.item-wrap .item ul li .text-con .title{
font-size: 16px;
color: #fff;
text-align : center;
line-height: 30px;
}
</style>
第四步,寫JQ程式碼
<script>
$(".item-wrap .item ul li").hover(function() {
/* Stuff to do when the mouse enters the element */
$(this).find(".text-con").animate({'height': '198px'}, 300);
}, function() {
/* Stuff to do when the mouse leaves the element */
$(this).find(".text-con").animate({'height': '30px'}, 300);
});
</script>
相關推薦
jquery滑鼠hover事件文字內容滑動遮罩效果
效果圖 => 第一步,首先引入jquery.min.js檔案 第二步,寫html程式碼 <div class="item-wrap"> <div class="item"> <ul>
jQuery滑鼠懸停事件.hover()用法說明
在JQuery中提供了.hover()事件,以簡化Dom中的mouseenter(滑鼠進入),和mouseleave(滑鼠離開)事件,hover的第一個引數(匿名方法)表示mouseenter,第二個引數表示mouseleave,即表示可以為hover傳遞兩個引數。如下程式
css3 滑鼠hover事件背景顏色漸變
由於經常會用到寫按鈕的一些樣式,經常要重新寫,不如儲存一次,以後直接到這裡拿。 執行的效果圖是這樣的: 這是全部的程式碼,直接複製走就可以運行了。 <!DOCTYPE html> <html lang="en"> <head>
使用jQuery的hover事件在IE中不停閃動的解決方法
在使用jQuery的hover事件時,經常會因為滑鼠滑動過快導致選單不停閃動的情況,相信很多朋友都遇到過自己做的縱向下拉選單不停的收縮,非常的討厭。今天在給一個網站設計選單時也遇到了這個情況,結果在百度上找了N久,沒有找到解決方法。在這裡吐槽一下,百度太2了,收錄的內容都
WEB前端animation和滑鼠hover事件屬性改變問題。
關於在animation動畫中改變的元素的屬性值,如果滑鼠的hover事件也改變了同一個屬性值,那麼該屬性是否會改變? 前端菜鳥,學習過程中的實踐如下: <!doctype html> <html> <head> <meta ch
JQuery 滑鼠hover不停閃動的問題
在WEB前端開發中jquery用的相對比較多了,之前遇到一個問題,一個下拉的jquery下拉選單效果,hover上去,一直閃動,用mouseovermouseout好好的,當時沒搞定,今天逛論壇看到一個方法,可以行.只怪自己之前看jquery api的時候不是很仔細。 解決閃動 可以使用Stop()
css3 實現圖片遮罩效果,hover出現文字
滑鼠hover 以後。圖片上面出現一個遮罩, 透明度變化, 顯示設定好的文字的文字,完全使用css 實現,下圖是效果 關鍵程式碼 .featured-image:hover { opacity: 0.9; color: #fff; background:
jquery 半透明遮罩效果
首先談談最簡單的實現方式吧。準備兩個div,一個是幕布<div class="bg"></div>,另一個是要顯示在螢幕正中央的部件<div class="content"></div>,content 裡面要顯示什麼東東,就
css3實現 滑鼠移上圖片 放大遮罩效果
最近學習了一些關於HTML5和CSS3方面的知識,通過一些小例子鞏固一下,拓展自己知識面。小例子使用CSS3實現 當滑鼠滑到圖片上,會出現 放大、遮罩的效果。請看下面截圖,PS:原始碼下載見下面網址,另
css-實現滑鼠移至圖片上顯示遮罩層
1、將遮罩層html程式碼與圖片放在一個div 我是放在 .img_div裡。 <div class="img_div"> <img src="./images/paella-dish.jpg"> <a href="#
自寫jQuery插件,實現簡單網頁遮罩層/彈出層功能,兼容IE6、IE7
left 文章 int 灰色 click absolute tro maxwidth 站點 版權聲明:本文為博主原創文章,未經博主同意不得轉載。 https://blog.csdn.net
用css3過濾做遮罩效果
clas ont mask isp 過濾 control pos -a -c <!DOCTYPE html><html ng-app="myApp" ng-controller="myController"><head lang="en">
Vegas如何使用子母軌制作遮罩效果?
使用子母軌制作遮罩效果可以讓讓視訊變得更加的豐富,具有創意,但是操作起來也相對複雜,尤其是對於新手使用者來說,更是一頭霧水。今天小編化繁為簡,為大傢俱體介紹下:Vegas如何使用子母軌制作遮罩效果? Vegas如何使用子母軌制作遮罩效果? 步驟1:開啟vegas中文版,建立三個視訊軌道。
css動畫遮罩效果自上而下與自下而上
基本結構 <div class="header"> <div class="inner"> <a href="#">標題欄</a> </div> </div> 1、自上而下 scss:被註釋的部分是
easyUI的treegrid新增節點(append)時間過長,設定等待(wait)遮罩效果
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
安卓實現區域性介面遮罩效果
背景 列表展示資料時,有些資料因為失效了,需要灰化展示。但是因為每一行資料裡面包含多個view(如包含使用者姓名、性別等等資訊),不方便對每個view進行灰化設定,所以需要一個遮罩層將整行遮蓋來達到灰化效果。大致效果如下: 解決方案 列表的item佈局採用RelativeL
小tip:CSS3下的圓形遮罩效果實現與應用
因為是使用純潔的CSS3實現,因此,IE6~8瀏覽器又將被侵豬籠。 看一下效果: HTML程式碼: <a href="#" class="test_outer"> <span class="test_cover trans
Unity功能記錄(十一) ------ 實現3D模型遮罩效果
事情是這樣的,之前呢,用Sprite Mask做了遮罩效果,但是,老闆想要月球來回轉動,就不能用圖片轉動,只能用UI了,那相應的,遮罩怎麼辦呢,老闆也是神人,給我指了一條新的思路,就是將3D遮罩轉化成2D遮罩,不過放在手機上卡成狗,幸好群裡大佬ific指點了一下遮罩的shader,效果
Qt實現半透明遮罩效果
本文索引 需求 原理 實現遮罩控制元件 遮罩的使用 需求 我們在顯示一些模態對話方塊的時候,往往需要將對話方塊的背景顏色調暗以達到突出當前對話方塊的效果,例如: 對話方塊的父視窗除了標題欄以外的部分都變暗了,在父視窗的對比下對話方塊的顯示效果就得
點選按鈕實現遮罩效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE>