Question

当另一个类用CSS聚焦时，是否可以更改一个类？例如，当.ClassB处于焦点时的.ClassA

我尝试实现与apple.com搜索功能类似的功能，其中菜单隐藏，搜索输入字段在选中后展开。

Answer 1

试试这个，它可能会给你一种希望的气味O： - ）

然而，你很可能会用纯CSS获得更好的解决方案，它通常是用JavaScript制作的，而每个HTML元素都有类列表，你可以很容易地添加一个类或删除一个类。 / p>

<html>
<head>
    <style>
        #spawner {
            display: none;
        }
        #spawner ~ div {
            display: none;
        }
        #spawner:checked ~ div {
            display: block;
        }
    </style>
</head>
<body>
    <label for="spawner">
            <div>Click me to show content!</div>
    </label>

    <input type="checkbox" id="spawner">

    <div>
        Was that a JavaScript? I doubt it!
    </div>
</body>
</html>

Answer 2

也许是这样的？

input { width: 35%; -webkit-transition: width .35s ease-in-out;  transition: width .35s ease-in-out;}
input:focus { width: 100%; }

Answer 3

＆＃13;

const menu = document.querySelector('.menu');
const search = document.querySelector('.search');

search.addEventListener('focus', () => {
  console.log('Focuse');
  search.classList.add('search--active');
  menu.classList.add('menu--hidden');
});

search.addEventListener('blur', () => {
  search.classList.remove('search--active');
  menu.classList.remove('menu--hidden');
});

＆＃13;

html, body {
  padding: 0;
  margin: 0;
}

.menu {
  display: flex;
  flex-direction: row;
}

.menu > a {
  padding: 10px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.menu > a:hover {
  background-color: rgba(0,0,0,0.5);
}

.wrapper {
  display: flex;
  flex-direction: row;
  background-color: #eae;
  box-shadow: 0 0 5px #888;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}

.search {
  width: 200px;
  border-radius: 10px;
  transition: width 0.5s;
}

.search--active {
  width: 500px;
  margin-left: auto;
}

.menu--hidden {
  display: none;
}

＆＃13;

<div class='wrapper'>

<div class='menu'>
  <a href='#'>Home</a>
  <a href='#'>About</a>
  <a href='#'>Contact Us</a>
  <a href='#'>Support</a>
  <a href='#'>Page</a>
</div>

<input class='search' type='search' name='search' />

</div>

＆＃13;

CSS：当.ClassB成为焦点时，如何更改.ClassA

3 个答案: