Javascript 使用jquery的多个条件？

使用coffeescript，当我将鼠标悬停在搜索图标上时，我希望能够将其更改为完全不透明。但仅当搜索输入字段未处于焦点时。当处于焦点时，我根本不希望悬停有任何影响。所以我在css中有一个自定义类，我只想在这两个事件都为真时触发它。比如：

 if $(".search input")is(":hover") && !$(".search input")is(":focus")  
  $(".regular-icon").addClass("iconhover")

css中的custom.iconhover类将在哪里

.iconhover {
 opacity: 1;
}

但这似乎对我不起作用。是否存在这样一种组合条件的方式：当输入不在焦点时，将鼠标悬停在搜索图标上只会使其不透明

HTML页面：

        <ul class="nav">
                <li><%= link_to "home" %></li>
                <li><%= link_to "about" %></li>
                <li><%= link_to "help" %></li>
                <li><%= link_to "tags" %></li>
                <li class="searchbox">
                  <div class="input-wrapper">
                   <%= form_with(model: @something, class: "search") do |form| %>
                   <%= form.text_field :search %>
                   <% end %>

                  </div>
                    <a href="#"><i class="regular-icon"></i><a>
                <li>
        </ul>

相关的css是：

.iconhover {
 opacity: 1;
}   //which is the class I want to change to

.regular-icon {
color: black;
opacity: 0.4;
 }  //the current styling of the icon

---

我不做Coffeescript，所以我的答案是纯Javascript，你必须翻译它

要在用户将鼠标悬停在元素上时运行代码，请使用

.hover（）

方法

您还需要一个

.focus（）

处理程序，因此当用户关注输入时，您将删除该类，因为

.hover（）

仅在用户进入或离开时运行，而不是在用户已经悬停时状态更改时运行

$（“.search input”）.hover（函数（）{
$（“.regular icon”）.toggleClass（“iconhover”，！$（this）.is（“：focus”）；
},
函数（）{
$（“.regular icon”）.removeClass（“iconhover”）；
}).focus（函数（）{
$（“.regular icon”）.removeClass（“iconhover”）
});
.regular-icon.iconhover{
背景颜色：粉红色；
}

图标
测试了它。它似乎没有执行。新的iconhover类没有任何影响。在多个浏览器上测试。仍然不确定问题出在哪里。你能发布HTML吗？问题中的代码似乎有很多打字错误，这使得很难判断正确的选择器应该是什么。更新了HTML的外观。您如何运行此
if
语句？你能创建一个MCVE吗？是的。我的整个脚本非常小，只是一个滚动函数和我们现在正在处理的函数。我更新了完整的咖啡脚本和相关的css。这就是与该问题相关的所有内容。
.search-input
与
search.input
不同。你的意思是使用不同的选择器吗？
.iconhover {
 opacity: 1;
}   //which is the class I want to change to

.regular-icon {
color: black;
opacity: 0.4;
 }  //the current styling of the icon