Показать и скрыть элементы с помощью JQuery

Question

Я в настоящее время работает над этим:

<div id='container'> 

<div id="box1"> 
<h1>Share it!</h1> 
</div>  

<div class="box" style="visibility: hidden"> 
<a href="#" class="bt btleft">Facebook Button here</a> 
<a href="#" class="bt btright">Twitter Button here</a> 
</div> 
</div> 

$("#container").hover(function() { 
    $("#container div").css("visibility","visible"); 
}, 
function() { 
    $("#container div").css("visibility","hidden"); 
}); 

http://jsfiddle.net/L9USt/3/

То, что я хочу достичь, это что-то вроде сайта Mashable

Что я хочу достичь, когда я нахожу o n слово «share It!», оно автоматически скроет и покажет ссылки (в том же точном месте). Я застрял здесь какое-то время, может кто-то поможет?

Answer 1

С немного изменений в вашем HTML, это то, что вы могли бы найти полезным , Просто используйте функциональность jQuery .hover для переключения состояний.

HTML

<div class="social"> 
    <h1>Share this</h1> 

    <div class="networks"> 
     <p>Twitter</p> 
     <p>Facebook</p> 
    </div> 
</div> 

CSS

.networks { 
    display:none; 
} 

JS

$(".social").hover(function() { 
    $("h1", this).hide(); 
    $(".networks", this).fadeIn(); 
}, function() { 
    $(".networks", this).hide(); 
    $("h1", this).fadeIn(); 
}); 

fadeIn() является просто добавленный для хорошего эффекта затухания, вы также можете использовать .show().

JSfiddle.

Answer 2

вам нужно скрыть box1 при наведении курсора мыши и показать на парении из

$("#container").hover(function() { 
     $('#box1').hide(); 
     $('.box').show();  
    }, 
    function() { 
     $('.box').hide();  
     $('#box1').show(); 
    }); 

и ваш HTML

<div id="box1"> 
<h1>Share it!</h1> 
</div>  

<div class="box" style="display:none"> 
<a href="#" class="bt btleft">Facebook Button here</a> 
<a href="#" class="bt btright">Twitter Button here</a> 
</div> 

Answer 3

Используйте функцию html, которая динамически загружает содержимое родительского элемента. Пример: http://jsfiddle.net/slown1/TqGFQ/

Вот решение:

HTML:

<div id='container' style="border:1px solid red;"> 
    <h1>Share it!</h1> 
</div> 

JS:

$("#container").hover(function() { 
    $("#container").html("<a href='#' "+ 
    "class='bt btleft'>"+"Facebook Button here</a><a href='#'" + 
    "class='bt btright'>Twitter Button here</a>'"); 
    }, 
     function() { 
      $("#container").html("<h1>Share it!</h1>"); 
     }); 

Answer 4

делает эту работу для вас? Я думаю, что его просто и работаю для вас

http://jsfiddle.net/mztcn/

$("#container").hover(function() { 
    $(".box").css("visibility", "visible"); 
}, function() { 
    $(".box").css("visibility", "hidden"); 
});