Text Change and background color change on Hover Using CSS-CodePudding

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. For some reason I can't make it work.

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

The result that I want to get to is this one: enter image description here

CodePudding user response：

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. and added/modified some 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>

CodePudding user response：

Please update CSS to. You are setting font size 0 that is causing an issue

.row:hover .description {
    color: rgb(0, 31, 150);
    background-color: rgb(0, 1, 0);
}