在圖像懸停顯示一個div區域與其中的窗體

我希望懸停的圖像，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>

我的問題是，我不能夠選擇的選擇，因爲它消失，如果我嘗試徘徊。

這裏是js fiddle

我已經更新了小提琴更準確需要什麼。

來源

2012-08-22 user930026

爲什麼使用php標記？ – Leri

試試這個fiddle

只是放在一個父DIV和施加額外的類吧。

您的Html和CSS的非常不整潔和非語義請使它成爲可能。

來源

2012-08-22 12:30:19 Champ

用jQuery代替它。在那裏你可以很容易地說，一旦用戶懸停在鏈接/圖像上，div保持不變。

這裏是它如何工作的：

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

來源

2012-08-22 12:17:37 weltschmerz

我只是測試這一點，它的工作原理：

$(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-22 12:18:07 user1477388

你應該使用jquery

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

來源

2012-08-22 12:18:28

我想解決這個使用jQuery。
如果我理解正確，那麼與類hide_img3的div是不可見的，但是當我指向標籤中的img時，div變得可見，是嗎？爲此，您可以使用此代碼。

如果你想要去與純CSS，你需要一個基本的包裝，即同時擁有，錨和DIV

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

來源

2012-08-22 12:20:12 dpitkevics

「如果我嘗試懸停消失」。如果將懸停狀態應用於該包裝，該框將保持打開狀態。

來源

2012-08-22 12:21:38 feeela

在圖像懸停顯示一個div區域與其中的窗體

回答

相關問題