jquery 的多个条件？

Question

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

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

css 中的自定义 .iconhover class 将是

.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>

我的咖啡脚本：

$(document).on "ready page:load", ->
  $(document).scroll ->
    scroll_start = 0
    scroll_start = $(this).scrollTop()
    if scroll_start > 575
      $(".main").addClass("change")
    else
      $(".main").removeClass("change")

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

相关的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

Answer 1

我不会做 Coffeescript，所以我的回答很简单Javascript，你得翻译一下。

要在用户将鼠标悬停在某个元素上时运行编写代码，请使用 .hover() 方法。

您还需要一个 .focus() 处理程序，因此当用户关注输入时删除 class，因为 .hover() 只有运行用户进入或离开，而不是当他们已经悬停时状态发生变化。

$(".search input").hover(function() {
    $(".regular-icon").toggleClass("iconhover", !$(this).is(":focus"));
  },
  function() {
    $(".regular-icon").removeClass("iconhover");
  }).focus(function() {
  $(".regular-icon").removeClass("iconhover")
});

.regular-icon.iconhover {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input>
</div>
<div class="regular-icon">Icon</div>

jquery 的多个条件？

Multiple conditions with jquery?

javascript

jquery

coffeescript