*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年1月5日 星期日

滑鼠到那裡,就變色到那裡:CSS hover


跟著滑鼠就變色:hover



  • 1.請於<head>xxx</head>之間或<body>之後置入下列 產生互動性的 CSS 語法
  • <style>
    .h001 {
    height: 4em; width: 80%; border-radius: 15px; border: 1px solid green;
    }

    .h001:hover {
    background-color: #FF9966; -webkit-box-shadow: 2px 4px 2px 3px silver;
    }

    </style>
  • 2.請在編輯區域置入 DIV 內容區塊
  • <div class="h001" >
    div的內容<br>
    </div>
  • 3.互動執行範例
  • div的內容

另一種常用的設置方法:

CSS設置 方法二:

<style>
.h001 {
height: 4em; width: 80%; border-radius: 15px; border: 1px solid green;
}

.divhover1104 {
}

.divhover1104:hover {
background-color: #FF9966; -webkit-box-shadow: 2px 4px 2px 3px silver;
}
</style>

div 的html:

<div class="h001 divhover1104" >
div的內容<br>
</div>

互 動寫作的三招心法:課堂搞笑版 video。 click!!






沒有留言:

張貼留言