2

我希望在图像悬停时出现 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>

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

这是js小提琴

我已经更新了小提琴以更准确地需要什么。

4

6 回答 6

2

我刚刚对此进行了测试，并且可以正常工作：

$(document).ready(function(){

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

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

为您更新：

http://jsfiddle.net/m3qLx/7/

于 2012-08-22T12:18:07.617 回答
2

试试这个小提琴

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

您的 Html 和 css 非常杂乱无章，请使其可读。

于 2012-08-22T12:30:19.290 回答
1

用 jQuery 代替。在那里，您可以轻松地说，一旦用户将鼠标悬停在链接/图像上，div 就会保留。

下面是它的工作原理：

$('.show_img3').mouseover(function(){
    $('.hide_img3').show();
});
于 2012-08-22T12:17:37.517 回答
1

你应该使用jquery

http://jsfiddle.net/m3qLx/8/

于 2012-08-22T12:18:28.627 回答
1

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

$('.show_img3').hover(function () {
    $('.hide_img3').fadeIn(1000);
}, function () {
    $('.hide_img3').fadeOut(1000);
});
于 2012-08-22T12:20:12.370 回答
0

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

如果你想使用纯 CSS，你需要一个底层的包装器，它包含锚点和 div。如果悬停状态应用于该包装器，则该框将保持打开状态。

于 2012-08-22T12:21:38.630 回答