首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS:当.ClassB处于焦点状态时如何更改.ClassA

CSS:当.ClassB处于焦点状态时如何更改.ClassA
EN

Stack Overflow用户
提问于 2018-06-17 22:43:58
回答 3查看 69关注 0票数 -1

使用CSS,当一个类处于焦点时,是否可以更改另一个类?例如,当.ClassB处于焦点时,使用.ClassA

我正在尝试实现类似于apple.com搜索功能的功能,即菜单隐藏,而搜索输入字段在被选中时展开。

EN

回答 3

Stack Overflow用户

发布于 2018-06-17 23:25:48

试试这个,它可能会给你带来希望的味道O:-)

然而,这是非常不可能的,你会得到一个更好的解决方案与纯CSS,它真正的通常是由JavaScript,而每个超文本标记语言元素都有一个类的列表,你可以添加一个类或删除一个类非常容易。

代码语言: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>

票数 0
EN

Stack Overflow用户

发布于 2018-06-17 23:41:55

也许是这样的?

代码语言:javascript
复制
input { width: 35%; -webkit-transition: width .35s ease-in-out;  transition: width .35s ease-in-out;}
input:focus { width: 100%; }
票数 0
EN

Stack Overflow用户

发布于 2018-06-18 00:17:40

代码语言:javascript
复制
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');
});
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50897704

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档