iT邦幫忙

0

請教一下關於HTML的問題

<!DOCTYPE html>
123
<style type="text/css">
	#block{
		background-color: black;
		width: 40px;
		height:25px;
	}
	#block:hover{
		background-color: white;
	}
</style>
<html>
<head>
	<title>hover</title>
</head>
<body>
	<div id='block'>456</div>
</body>
</html>

現在是這樣,我要123顯示,456游標移上去才顯示,但是兩個分開了,請教大大怎麼把他們接在一起?(請直接貼程式碼)

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 2 級 ‧ 2021-09-24 07:21:55 檢舉
把123移到body區塊裡面。
style標籤及內容移到head區塊裡面。

建議讀一遍html基礎 https://developer.mozilla.org/zh-TW/docs/Web/HTML
(請直接貼程式碼)????
嗯!!沒辦法,跳過
直接貼語法
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
#block { background: black; color:white; width: 40px; text-align:center; }
#block:hover{ background: white; color:black; }
#block:after { content: '123'; }
#block:hover:after { content: '456'; }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>
Homura iT邦高手 1 級 ‧ 2021-09-24 15:47:03 檢舉
窮嘶發發發大寫在conten裡
不錯的解法
怎麼不貼在回答@@
總是有更高肝的答案,我的肝還沒黑,不好意思占位子
發大算不錯了啦。直接用CSS解。
我是有點懶的回答就是了。因為覺得太不客氣了。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Mao
iT邦新手 1 級 ‧ 2021-09-24 14:01:02
最佳解答

請直接把內文輸入到 body 標籤內,把要連在一起的放在 span 內

<!DOCTYPE html>
<html>
<head>
    <title>hover</title>
    <style type="text/css">
    #block{
      background-color: black;
      width: 40px;
      height:25px;
    }
    #block:hover{
      background-color: white;
    }
    </style>
</head>
<body>
<!--  請把你要輸入的內容輸入到 body 內  -->
    <div>
    123<span id='block'>456</span>
    </div>
<!--  請把你要輸入的內容輸入到 body 內  -->
</body>
</html>

Codepen

0
japhenchen
iT邦超人 1 級 ‧ 2021-09-24 07:52:41
#block:hover{
    background-color: white;
    display:inline-block;
}

搞定收工

不過反白的456只要按Ctrl+A就看到了耶!

0
小山丘
iT邦新手 2 級 ‧ 2021-09-24 10:09:06

可以看一下display這屬性

可以參考Amos大的文章
https://ithelp.ithome.com.tw/articles/10253288

0
大河
iT邦新手 3 級 ‧ 2021-09-24 11:36:06

那麼藏在CSS呢? XD

<p id="test">123</p>
#test {
  width: 100px;
  text-align: center;
  border-radius: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
}
#test:hover:after {
  content: '456'
}

預覽
Codepen

我要發表回答

立即登入回答