0

尽我所能将标题与问题匹配

我有一个小提琴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;
}

那有意义吗？

4

2 回答 2

3

您只需要更改item:hover为item.match:hover和 presto。

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

看小提琴

于 2013-09-16T20:33:43.463 回答
1

在浏览了您的 JS 之后，我看到您正在添加一个match在搜索正确时调用的类。

那么为什么不指定你的:hoverCSS 在找到这个类时执行：

.item.match:hover .popover-email { display: block; }
于 2013-09-16T20:34:52.300 回答