Question

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

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

css中的自定义.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>

我的咖啡：

$(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()处理程序，因此当用户关注输入时您将删除该类，因为.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的多个条件？

1 个答案: