CSS:当.ClassB处于焦点状态时如何更改.ClassA
CSS:当.ClassB处于焦点状态时如何更改.ClassA
提问于 2018-06-17 22:43:58
使用CSS，当一个类处于焦点时，是否可以更改另一个类？例如，当.ClassB处于焦点时，使用.ClassA
我正在尝试实现类似于apple.com搜索功能的功能，即菜单隐藏，而搜索输入字段在被选中时展开。
回答 3
Stack Overflow用户
发布于 2018-06-17 23:25:48
试试这个，它可能会给你带来希望的味道O:-)
然而，这是非常不可能的，你会得到一个更好的解决方案与纯CSS，它真正的通常是由JavaScript，而每个超文本标记语言元素都有一个类的列表，你可以添加一个类或删除一个类非常容易。
<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>
Stack Overflow用户
发布于 2018-06-17 23:41:55
也许是这样的？
input { width: 35%; -webkit-transition: width .35s ease-in-out; transition: width .35s ease-in-out;}
input:focus { width: 100%; }Stack Overflow用户
发布于 2018-06-18 00:17:40
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');
});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;
}<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50897704
复制相关文章
相似问题
腾讯云开发者
