相关疑难解决方法(0)

我正在尝试<ul>使用CSS过渡进行滑动.

将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,

如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.

如果不使用JavaScript,我怎么能这样做呢？

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
} …

假设我有以下代码:

HTML

<div class="container">
   <input class="myAwesomeInputBox">
</div>

CSS

.input [type=text]:focus > .//ANY CLASS SOMEWHERE ON THE WEBSITE{
   //Some sweet CSS.
}

显然这段代码不起作用.我想要一些特定的CSS在我的输入框上有焦点时执行.这是可能吗？

我并没有特别寻找只有html/css的解决方案.任何能够实现这一目标的解决方案都是受

我上面的代码只是一个非常简单的例子.我的问题很简单.是否可以使用以下方法更改网站上任何元素的样式:聚焦于输入框.

我知道 TailwindCSS 有group要使用的类，但这仅用于当父元素激活某些事件时更改子元素的样式，但我希望反之亦然。

<div class="parent"> <!-- border color should be red when child is focused -->
  <img class="icon">
  <input class="child" type="text">
</div>

而且我不想重写 css 类。只需使用 TailwindCSS。

我想要的是改变div带字母的颜色s

<div class="search_container">
    <input type="text" class="search_field" placeholder="Search..." />
    <div id="magnify_glass">s</div>
</div>

我试过的是这个

<script>
    $('.search_field').focus(function() {
        $('#magnify_glass').css('color','#ff0000');
    });
</script>