Question

尝试尽可能地将标题与问题相匹配

我有一个小提琴 here ...

在当前状态下，您会看到橙色<div> s，当悬停在上方时，我不希望显示悬停图像（.popover-email和.popover-pdf）。

搜索时，找到匹配项，然后启用li.match元素，然后我希望图像在悬停时可见...只是不在其原生状态。

我似乎无法把它放在一起做我想做的事。不确定它是否还可能。

以下是该页面区域的CSS ...

.iso-container li.match {
    padding-top: 20px;
    background: #f8981d;
    padding-left: 5px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    font-size: .7em;
}

.iso-container li.miss  {
    opacity: 0.3;
}


.popover-email {
  display: none;
  width:  27px;
  height: 24px;
  background-image: url(../images/bxw_email.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 95px;
  left: 25px;
}

.item:hover .popover-email { display: block; }

.popover-pdf {
  display: none;
  width:  25px;
  height: 27px;
  background-image: url(../images/pdf-button.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 95px;
  left: 88px;
}

.item:hover .popover-pdf { display: block; }


.item:hover {
  z-index: 10;
}

这有意义吗？

Answer 1

您只需将item:hover更改为item.match:hover并将其更改为

.item.match:hover .popover-email { display: block; }
.item.match:hover .popover-pdf { display: block; }

See the fiddle

Answer 2

在浏览完JS后，我发现您在搜索正确时添加了一个名为match的类。

那么为什么不指定在找到这个类时要执行的:hover CSS：

.item.match:hover .popover-email { display: block; }

仅在特定状态下显示悬停图像

2 个答案:

See the fiddle