Javascript 将url传递给悬停/聚焦图像

我有一些html/css代码，可以在鼠标悬停在某些文本上并单击时显示图像，该图像将成为焦点并保留在页面上：

CSS portion
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none }
.hover_img a:hover span {display:block; overflow:visible; height:200px; width:200px;position:absolute}
.hover_img a:focus span {display:block; overflow:visible; height:200px; width:200px}

HTML部分

上面的代码很好。问题是，当我将鼠标悬停和/或焦点放在文本“German Shepherd”上时，我希望该悬停/焦点图像可以单击，并且当单击时，会将用户带到新页面。换句话说，我希望类似以下内容：

HTML portion
<div class="hover_img">
<a href="https://www.akc.org/dog-breeds/german-shepherd-dog/">German Shepherd
<span>
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12213218/German-Shepherd-on-White-00.jpg" alt="German Shepherd" />
</span>
</a>
</div>

HTML部分

但是，如果实现了上述功能，则单击“德国牧羊犬”一词会自动将用户带到URL。但是，在显示悬停/聚焦图像的页面上，他们可以单击该图像并转到正确的网站。我正在尝试删除前一个词，以便单击“德国牧羊犬”仅作为焦点，然后用户单击悬停/聚焦图像以转到URL

---

html、javascript或css都可以，除非jquery让它变得更简单。

假设有一个容器元素的

id

为

container

：

在容器元素上添加事件侦听器

在容器中侦听任何

单击
事件

检查单击的

是否具有伪类

：hover

如果未悬停，请防止单击，否则正常处理单击

这应该对你有用。如果我遗漏了什么，请告诉我：

document.getElementById（'container'）。addEventListener（'click'，checkHover）；
函数检查悬停（e）{
如果（！e.target.nexist（'a:hover'）| | e.target.nodeName=='a'）{
e、 预防默认值（）；
}
}

HTML portion
<div class="hover_img">
<a href="https://www.akc.org/dog-breeds/german-shepherd-dog/">German Shepherd
<span>
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12213218/German-Shepherd-on-White-00.jpg" alt="German Shepherd" />
</span>
</a>
</div>