數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎圖像編輯:GIMP
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

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!!






沒有留言:

張貼留言