Select all elements during hover-CodePudding

I have simple problem to find apropriate selector during hover statement. I would like to to change background color of fields "1" to "=" in my calculator. Currently when I select 1 the others are lighted but 1 is not. It is possible to write hover statement in another way? I tried using nth-child selectors but it without result.

 * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }

      div.panel {
        display: flex;
        height: 85vh;
        min-width: 500px;
        flex-basis: 60%;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
        background-color: #fff;
      }
      div.result {
        display: flex;
        height: 15vh;
        padding-right: 50px;
        flex-basis: 100%;
        justify-content: flex-end;
        align-items: center;
        font-size: 50px;
        background-color: #000;
        color: white;
      }

      div.result ~ div {
        display: flex;
        flex-basis: 30%;
        height: 10vh;
        justify-content: center;
        align-items: center;
        background-color: cadetblue;
        color: white;
        font-size: 40px;
        cursor: pointer;
      }

      div.result ~ div:hover ~ div {
        background-color: aquamarine;
      }
      div div:nth-last-of-type(1),
      div div:nth-last-of-type(2) {
        flex-basis: 45%;
      }

 <body>
    <div >
      <div >2 343.99</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div> </div>
      <div>0</div>
      <div>-</div>
      <div>/</div>
      <div>.</div>
      <div>*</div>
      <div>C</div>
      <div>=</div>
    </div>
  </body>
</html>

CodePudding user response：

You could solve this by wrapping all the elements in a span or div and then add the hover effect to that parent. bet it will make the css look a little better as well. E.g:

<body>
<div >
  <div >2 343.99</div>
  <span >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div> </div>
    <div>0</div>
    <div>-</div>
    <div>/</div>
    <div>.</div>
    <div>*</div>
    <div>C</div>
    <div>=</div>
  </span>
</div>