Question

我的<div>被归类为class="tooltip"，通常隐藏display:none。

我希望<div>在点击我的图片地图区域时显示display:block。我打算使用:target伪类。

以下是我的代码的简化版本：

<img id="slot" class="single" src="slot.png" usemap="#slot"/>

<map name="slot">
    <area
         shape="poly"
         coords="30,0,61,15,31,31,0,16"
         alt="Slot"
         href="#trigger-happy">
</map>

<div class="fixed-container">
    <div class="tooltip">
            Slot
    </div>
</div>

正如您所看到的，诀窍是href隐藏在<area>标记内。据我所知，目前无法选择纯CSS的父级。

您对如何执行此任务有什么建议吗？我不熟悉JavaScript，所以一个纯CSS的答案是理想的。我知道我最终还是要去JS，所以如果没有其他方法，JS修复也是可以接受的。

应该注意的是，通过将:hover伪类应用到map标记，我已经可以获得类似的结果。使用map:hover时，浏览器会做出完美的反应。但是，对于实际点击而不是悬停，我不确定我是否可以将<a>与<map>一起使用，但它似乎无效。

Answer 1

您要通过#trigger-happy定位href，因此您需要将id="trigger-happy"添加到元素.tooltip。

这是working example。

更新了HTML

<div class="fixed-container">
    <div id="trigger-happy" class="tooltip">
        ...
    </div>
</div>

使用:target伪类来设置目标元素#trigger-happy的样式。

基本CSS看起来像这样：

#trigger-happy {
    display:none;
}

#trigger-happy:target {
    display:block;
}

:target方法的缺点是，一旦点击某些内容，就会点击它。此选项没有任何切换可用。我想你可以使用复选框hack，如果你想要它可以切换，否则需要JS。

如何在图像映射中使用伪类：目标

1 个答案: