主页 / 问题 / 1567199
Accepted
Djony Cooper
Asked:2024-02-20 18:54:08 +0800 CST2024-02-20 18:54:08 +0800 CST

使用 .focus CSS

  • 772

我有一个小部件，当您将鼠标悬停时，它会从折叠状态展开，而当您将鼠标移开时，它会返回到其原始状态。如果光标位于某个元素上，则它不应返回到其原始状态。如何正确使用对焦？

.top_line_widget {
  display: flex;
  padding: 3px 460px;
}

.search {
  display: flex;
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 5px;
}

.search_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  color: #ffffff;
  cursor: pointer;
}

.search_text {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
  font-width: bold;
}

.search:hover>.search_text {
  width: 910px;
  padding: 0 6px;
}

.search:hover>.search_btn:hover {
  background: linear-gradient(45deg, #ffa500, #ff2400);
}
<div class="top_line_widget">
  <div class="search">
    <input type="text" class="search_text" placeholder="Введите имя или фамилию" />
    <img class="search_btn" src=".\static\images\phone_book.png">
  </div>
</div>

我尝试通过将其添加到 CSS 来解决该问题 - 但没有成功：

.search:focus > .search_text{
  width:910px;
  padding: 0 6px;
}
css3

1 个回答

  1. Best Answer

    使用:focus-within伪类：

    .top_line_widget {
  display: flex;
  padding: 3px 460px;
}

.search {
  display: flex;
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 5px;
}

.search_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  color: #ffffff;
  cursor: pointer;
}

.search_text {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
  font-width: bold;
}

.search:hover>.search_text,
.search:focus-within>.search_text {
  width: 910px;
  padding: 0 6px;
}

.search:hover>.search_btn:hover {
  background: linear-gradient(45deg, #ffa500, #ff2400);
}
    <div class="top_line_widget">
  <div class="search">
    <input type="text" class="search_text" placeholder="Введите имя или фамилию" />
    <img class="search_btn" src=".\static\images\phone_book.png">
  </div>
</div>

    • 1

相关问题