Блог

Я новичок в CSS и пытаюсь воспроизвести этот пример с облачными провайдерами (GCP, Azure или AWS).

Это то, что у меня есть до сих пор, и я изо всех сил пытаюсь сделать li элемент из этого списка синим ( img border ) всякий раз, li когда он выбран или когда :hover .

HTML

   <ul className="cloud-list">
    <li>
      <div className="logo-container">
      <img src={process.env.PUBLIC_URL   "images/aws.png"} alt="logo" />
      </div>
      <h4>Amazon Web Services</h4>
    </li>
    <li>
    <div className="logo-container">
      <img src={process.env.PUBLIC_URL   "images/gcp.png"} alt="logo" />
      </div>              <h4>Google Cloud Platform</h4>
    </li>
    <li>
    <div className="logo-container">
      <img src={process.env.PUBLIC_URL   "images/azure.png"} alt="logo" />
      </div>              <h4>Microsoft Amzure</h4>
    </li>
  </ul>
 

css

  .cloud-list{
    display: flex;
    justify-content: center;
    text-align: center;    
  }

  .cloud-list li{
    border-radius: 5%;
    height: 250px;
    width: 250px;
    margin: 0 15px;
    -moz-box-shadow: 0 1px 9px #999;
    -webkit-box-shadow: 0 1px 9px #999;
    box-shadow: 0 1px 9px #999;
  }

  .cloud-list .logo-container{
    height: 80%;
    display: flex;
    align-items: center;
  }

.cloud-list li img{
  margin: auto;
  width: 180px;
  height: auto;
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6  amp; Opera 15  */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35  */
}
 

Вы могли бы добавить это, чтобы установить границу:

 .cloud-list li:hover,
.cloud-list li:focus,
.cloud-list li:active {
    border: solid 1px blue;
}