Question

但它确实可以在Chrome中使用。

我有一个使用的下拉列表：将鼠标悬停在.dropdownContainer上，以便在悬停时使边框呈灰色。

问题当我在下拉列表中选择一个选项并且下拉项目崩溃时（因为我已经选择了一个项目），下拉边框仍然是蓝色。

我怀疑这个是因为下拉项目消失了所以从技术上来说我永远不会将鼠标移开.dropdownContainer

这是带有.dropdownContainer的html，其中包含整个下拉列表。

  <div class="dropdownContainer">
    <span class="down-arrow-blue dropdown-arrow-inverse-Grey"></span>
    <div id="content" class="selectedItem">Records Created</div>
    <div class="selectThis dropdownItems">
      <span id="buttonArrow" class="dropdown-arrow-Blue dropdown-arrow-inverse-Blue" ></span>
      <div class="dropdownItem" value="Records Created">Records Created</div>
      <div class="dropdownItem" value="Permits Issued">Permits Issued</div>
      <div class="dropdownItem" value="">Fees Collected</div>
      <div class="dropdownItem" value="">Inspections Done</div>
    </div>
  </div>

下面的CSS

.dropdownContainer {
 border: 3px solid grey;
}

.dropdownContainer:hover {
 border: 3px solid blue;
}

.selectDropdown {
  border: 3px solid blue !important;
}

你会注意到我没有使用OPTION或SELECT标签。这是我用来复制我自己的下拉列表的javascript。添加和删除类'selectDropdown'也会切换颜色。

    $('.dropdownItem').on('click', function() {
      $('.dropdownItem').removeClass('selectThis');
      $(this).addClass('selectThis');
    });
  $( '.dropdownItem' ).click(function() {
      var htmlString = $( this ).html();
      $(this).parent().siblings( '#content' ).text( htmlString );
      $('.dropdownItems').removeClass('animateDropdown');
       $('.dropdownContainer').removeClass('selectDropdown');
       $('.down-arrow-blue').removeClass('dropdown-arrow-inverse-Blue').addClass('dropdown-arrow-inverse-Grey');
  });    
    $('.selectedItem, .dropdownArrow').on( 'click', function() {
        $(this).siblings('.dropdownItems').toggleClass('animateDropdown');
        $(this).parent('.dropdownContainer').toggleClass('selectDropdown');
        $(this).siblings('.down-arrow-blue').toggleClass('dropdown-arrow-inverse-Blue').toggleClass('dropdown-arrow-inverse-Grey');
    });
    $('body').click(function(e)
    {
       $('.dropdownItems').removeClass('animateDropdown');
       $('.dropdownContainer').removeClass('selectDropdown');
       $('#datepicker-calendar').hide();
       $('.down-arrow-blue').removeClass('dropdown-arrow-inverse-Blue').addClass('dropdown-arrow-inverse-Grey');
    });
    $('.dropdownContainer').click(function(e)
    {
       e.stopPropagation();
    });

CSS3＆＃39; s：hover在Safari中不起作用

0 个答案: