<!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游標移上去才顯示，但是兩個分開了，請教大大怎麼把他們接在一起?(請直接貼程式碼)
已邀請的邦友 {{ invite_list.length }}/5
請直接把內文輸入到 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>
#block:hover{
background-color: white;
display:inline-block;
}
搞定收工
可以看一下display這屬性
可以參考Amos大的文章
https://ithelp.ithome.com.tw/articles/10253288
那麼藏在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
iThome鐵人賽
看影片追技術