Html 在图像上悬停显示一个包含表单的div区域

我希望在图像悬停时，div框应该出现，用户可以从该div中选择一个选项

<a class="show_img3" href="frequenz?link=3" class="btn">
  <img style="padding-top: 8px;padding-bottom: 26px;" src="<?php echo bloginfo( 'template_url' );?> /img/bouquet/2.png">
  <span class="bqy_no">BRAUCHE MEHR</span></a>
<div class="hide_img3"><a href=#>2</a><br><a href="#">3</a></div>

我的问题是，我无法选择一个选项，因为如果我尝试悬停，它将消失

这是你的电话号码

---

我已经更新了fiddle，使其更准确地显示所需内容。

使用jQuery进行更新。在这里，您可以很容易地说，一旦用户将鼠标悬停在链接/图像上，div就会保持不变

以下是它的工作原理：

$('.show_img3').mouseover(function(){
    $('.hide_img3').show();
});

$(document).ready(function(){

    $('.show_img3').hover(function(){
        $('.hide_img3').show();
    });
    $('.close a').click(function(){
        $('.hide_img3').hide();
    });
});​

---

我刚刚测试了这个，它可以工作：

$('.show_img3').mouseover(function(){
    $('.hide_img3').show();
});

$(document).ready(function(){

    $('.show_img3').hover(function(){
        $('.hide_img3').show();
    });
    $('.close a').click(function(){
        $('.hide_img3').hide();
    });
});​

打开X后，必须单击X以将其隐藏

为您更新：

您应该使用jquery

---

我会使用jQuery解决这个问题。
如果我理解正确，那么带有hide_img3类的div是不可见的，但是当我指向标签中的img时，div就变为可见了，是吗？ 为此，您可以使用此代码

$('.show_img3').hover(function () {
    $('.hide_img3').fadeIn(1000);
}, function () {
    $('.hide_img3').fadeOut(1000);
});

“如果我尝试悬停，它就会消失”

如果您想使用普通CSS，您需要一个底层包装器，它同时包含锚定和div。如果将悬停状态应用于该包装器，则框将保持打开状态。

尝试此方法

只是放置了一个父div并对其应用了一个额外的类

你的Html和css非常不整洁，没有语义，请让它可读