jQuery鼠標懸停點擊展開切換代碼



91 360 121



特效描述:jQuery 鼠標懸停 點擊展開切換,jQuery鼠標懸停點擊展開切換代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

3. HTML代碼

<div class="container">
  <div class="card-container-1">
    <div class="card"> 
      <h1>1</h1>
    </div>
    <div class="card"> 
      <h1>2</h1>
    </div>
    <div class="card"> 
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-2">
    <div class="controller right"></div>
    <div class="controller left"></div>
    <div class="card-holder">
      <div class="card"> 
        <h1>1</h1>
      </div>
      <div class="card"> 
        <h1>2</h1>
      </div>
      <div class="card"> 
        <h1>3</h1>
      </div>
    </div>
  </div>
  <div class="card-container-3"><span class="controller right"></span><span class="controller left"></span>
    <div class="card"> 
      <h1>1</h1>
    </div>
    <div class="card"> 
      <h1>2</h1>
    </div>
    <div class="card"> 
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-4">
    <div class="card first">
      <h1>1</h1>
    </div>
    <div class="card second">
      <h1>2</h1>
    </div>
    <div class="card third">
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-5">
    <div class="card">
      <h1>1</h1>
    </div>
    <div class="card">
      <h1>2</h1>
    </div>
    <div class="card">
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-6">
    <div class="card">
      <h1>1</h1>
    </div>
    <div class="card">
      <h1>2</h1>
    </div>
    <div class="card">
      <h1>3</h1>
    </div>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 疊加浮動層 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 層疊疊加 疊加層疊 層疊 疊加 加載更多 其他 鼠標懸停 圖片疊加 圖片層疊 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子