iT邦幫忙

0

大大,請教下...

我是個HTML新手,我想做出像 https://zh.moegirl.org.cn/index.php?title=%E9%AD%94%E6%B3%95%E5%B0%91%E5%A5%B3&variant=zh-tw&mobileaction=toggle_view_desktop 這樣黑色的區塊,也就是滑鼠上去就顯示,不再那就變回黑的,請問怎做?(請貼個code給我,拜託惹)

Hankz iT邦新手 3 級 ‧ 2021-09-22 18:04:55 檢舉
keyword: css hover

2 個回答

2
kirin0127
iT邦新手 5 級 ‧ 2021-09-22 23:02:18
最佳解答
<!DOCTYPE html>
<style type="text/css">
	#block{
		background-color: black;
		width: 50px;
		height: 50px;
	}
	#block:hover{
		background-color: white;
	}
</style>
<html>
<head>
	<title>hover</title>
</head>
<body>
	<div id='block'>hello</div>
</body>
</html>

借解個任務

3
毛毛
iT邦新手 3 級 ‧ 2021-09-22 18:10:23

Codepen

<!-- html -->
<p>
  魔法少女的概念,可以認為是源自“魔女”的概念,早期對魔法少女也有小魔女等稱呼,但現在“魔法少女”與“魔女”的概念已經相差巨大。不過仍有少數作品中,有著具有魔女身份的魔法少女。<span class="demo">朋友你聽說過魔女宅急便嗎?</span>
</p>
/* css */
.demo {
  background: #000;
  transition: all .3s;
}
.demo:hover {
  color: #fff;
}

使用偽類選擇器改變樣式。
可以參考我寫的這篇文章 CSS 偽類選擇器(Pseudo classes) 與 偽元素(Pseudo element)
或上網查關鍵字 「CSS hover」

我要發表回答

立即登入回答