Question

我正在一个有手风琴的网站上工作，并且有一个奇怪的化妆品问题，我似乎无法修复。如果你将鼠标悬停在一个不活跃的手风琴上，左边的箭头图标和ui-icon我添加了暗淡。然后，一旦我选择这种手风琴使其成为活动手风琴，图标仍然暗淡，直到选定的手风琴不再有效。有谁知道具体是什么？我想禁用它。

这种变色似乎是标准的。如果您查看Jquery UI网站，他们会在演示中显示它：https://jqueryui.com/accordion/。

我已经玩过各种CSS ui-accordion设置而没有找到解决方案的运气。我也在网上搜索了很多，还没有发现任何具体的内容。任何方向将不胜感激。

Answer 1

您可能无法找到的原因是图标为background-img，图片会在悬停时发生变化。另一件事是，使用:hover并未按常规方式配置悬停，而是当您将鼠标悬停在jQuery上时，class会为其添加新的.ui-state-hover .ui-icon { background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important; } .ui-state-active .ui-icon { background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important; }。

您需要添加的CSS如下：

$(function() {
  var icons = {
    header: "ui-icon-circle-arrow-e",
    activeHeader: "ui-icon-circle-arrow-s"
  };
  $("#accordion").accordion({
    icons: icons
  });
  $("#toggle").button().click(function() {
    if ($("#accordion").accordion("option", "icons")) {
      $("#accordion").accordion("option", "icons", null);
    } else {
      $("#accordion").accordion("option", "icons", icons);
    }
  });
});

当你悬停时和不悬停时，这将使它们保持一致。

这是一个显示最终结果的片段。

.ui-state-hover .ui-icon {
  background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important;
}

.ui-state-active .ui-icon {
    background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important;
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
  </div>
</div>

 <Component Id="ServiceComponent" Directory="INSTALLFOLDER">
      <File Id="ServiceExecutable"
          Name="$(var.LoggerService.TargetFileName)"
          Source="$(var.LoggerService.TargetPath)"
          Vital="yes"
          KeyPath="yes"
          DiskId="1" />
  ...

悬停并制作手风琴活动的暗淡图标

1 个答案: