使用 CSS 更改悬停时的文本更改和背景颜色更改
[英]Text Change and background color change on Hover Using CSS
问题描述
I have 3 rows with text and on hover I want the text on the right side to change and the background color of that text as well.
我有 3 行文本，悬停时我希望右侧的文本以及该文本的背景颜色发生变化。 For some reason I can't make it work.出于某种原因，我无法让它工作。
HTML 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 link: see here JSFiddle链接：见这里
The result that I want to get to is this one: enter image description here我想要得到的结果是：在此处输入图像描述
2 个解决方案
解决方案1
0 2021-11-09 09:50:17
Please update CSS to.请将 CSS 更新为。 You are setting font size 0 that is causing an issue您正在设置导致问题的字体大小 0
.row:hover .description { color: rgb(0, 31, 150); background-color: rgb(0, 1, 0); }
解决方案2
0 已采纳 2021-11-09 10:16:17
After viewing your image description, I edited your code a little bit.查看您的图像描述后，我稍微编辑了您的代码。 Hope it will fulfill your expectation.希望它能满足您的期望。
I just add a span tag in your description.我只是在您的描述中添加了一个 span 标签。 and added/modified some CSS.并添加/修改了一些 CSS。
Change details:更改详情：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.