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





沒有留言:

張貼留言