使用 CSS 更改懸停時的文本更改和背景顏色更改
[英]Text Change and background color change on Hover Using CSS
問題描述
我有 3 行文本，懸停時我希望右側的文本以及該文本的背景顏色發生變化。 出於某種原因，我無法讓它工作。
HTML
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">A string is a series of characters.</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">A number can be written with,or without decimals.</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">A boolean can be either true or false.</div>
</div>
</div>
JSFiddle鏈接：見這里
我想要得到的結果是：在此處輸入圖像描述
2 個解決方案
解決方案1
0 2021-11-09 09:50:17
請將 CSS 更新為。 您正在設置導致問題的字體大小 0
.row:hover .description { color: rgb(0, 31, 150); background-color: rgb(0, 1, 0); }
解決方案2
0 已采納 2021-11-09 10:16:17
查看您的圖像描述后，我稍微編輯了您的代碼。 希望它能滿足您的期望。
我只是在您的描述中添加了一個 span 標簽。 並添加/修改了一些 CSS。
更改詳情：
body { display: flex; justify-content: center; } .container { font-family: 'Red Hat Mono', monospace; display: flex; justify-content: center; position: relative; flex-direction: column; width: 600px; height: 600px; } .row { display: flex; background-color: rgb(178, 236, 205); padding: 10px 0px 10px 15px; border-radius: 50px; margin: 15px 15px 15px 20px; } .content { font-size: 1.2em; flex:1; font-weight: bold; } .description { display: flex; justify-content: right; font-family: 'Lato', 'sans-serif'; color: rgb(189, 132, 27); font-size: 0.95em; margin-right: 20px; font-weight: bold; } .row:hover .description{ background-color: rgb(80, 231, 150); color: red; margin-right: 0px; margin-top: -9px; margin-bottom: -9px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; font-size: 0.95em; font-family: 'Lato', 'sans-serif'; } .row:hover .description > span{ margin-top: 9px; margin-right: 20px; margin-left: 10px }
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@400;600&display=swap" rel="stylesheet"> <title>Tema 10</title> <body> <div class="container"> <div class="row"> <div class="content">string</div> <div class="description"> <span>A string is a series of characters.</span> </div> </div> <div class="row"> <div class="content">number</div> <div class="description"> <span>A number can be written with,or without decimals.</span> </div> </div> <div class="row"> <div class="content">boolean</div> <div class="description"> <span>A boolean can be either true or false.</span> </div> </div> </div> </body> </html>
CSS：在懸停時更改背景顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.