时间戳

首页 > 解决方案 > 如何让你的 flexbox 在移动设备上悬停和灵活

html - 如何让你的 flexbox 在移动设备上悬停和灵活

问题描述

我正在建立一个带有flexbox属性的网站。但是，我希望当用户将鼠标悬停在框上时，我希望框的颜色发生变化，而在移动设备上时，我希望框进行相应的调整。

这是我的代码和我的尝试：

HTML：

<div id="site-features" class="features-box">
 <a href="#"><h3>My heading 3 - one</h3> <img src="/assets/img1.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - two</h3> <img src="/assets/img2.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - three</h3> <img src="/assets/img3.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - four</h3> <img src="/assets/img4.png" height="95px" alt="read out"></a>

<a href="#"><h3>My heading 3 - five</h3> <img src="/assets/img5.png" height="95px" alt="read out"></a>
</div>

CSS：

.features-box {
    margin: 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1560px;
    height: 380px;
    background-color: rgb(6, 67, 122);
    padding: 5px;
    /* this */
}

.features-box>a {
    text-decoration: none;
    flex: 1 1 auto;
    border: 5px rgb(255, 255, 255) solid;
    margin: 5px;
    width: 500px;
    background-color: brown;
    height: 250px;
    position: relative;
    text-align: center;
    color: white;
}

.features-box>a:hover {
    color: green;
}

问题是当我悬停时，它只针对文本，而不是框本身。如何解决此问题以定位框而不是链接，因为我希望链接定位框而不仅仅是文本

标签： htmlcssflexbox

解决方案

你可以这样做 -

.features-box {
  margin: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(6, 67, 122);
  padding: 5px;
  /* this */
}

.features-box>a {
  text-decoration: none;
  flex: 1 1 auto;
  border: 5px rgb(255, 255, 255) solid;
  margin: 5px;
  width: 200px;
  background-color: brown;
  height: 250px;
  position: relative;
  text-align: center;
  color: white;
}

.features-box>a:hover {
  color: green;
  background-color: yellow ;
}
<div id="site-features" class="features-box">
  <a href="#">
    <h3>My heading 3 - one</h3> <img src="/assets/img1.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - two</h3> <img src="/assets/img2.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - three</h3> <img src="/assets/img3.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - four</h3> <img src="/assets/img4.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - five</h3> <img src="/assets/img5.png" height="95px" alt="read out"></a>
</div>

我background-color:yellow在 CSS 中添加了它，它可以帮助您更改卡片的背景颜色，而不仅仅是文本颜色。此外，我还删除了 flexbox 的宽度并将其包裹起来，这有助于保持布局灵活，并且会根据屏幕大小进行调整。

推荐阅读