当你点击图片时，如何制作一个div标签显示？

Question

我试图让一个div标签出现时，你点击一个图片。我使用jquery在两者之间切换，但它不起作用。我认为这与我所使用的css有关。我把它都放在小提琴上了。这就是我想展示的迪夫。

<div >
<p class="dinnerplates" style="background-color:#69a0d0;">blurb about vintage plates.blurb about vintage plates.blurb about vintage plates.blurb about vintage plates.blurb about vintage plates.blurb about vintage plates.</p>
</div>

https://jsfiddle.net/otbhffeh/

Answer 1

试试这个，也包括jquery。

$( document ).ready(function() {
$(".dinnerplates").hide();

// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
       var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })

});
$(".masterTooltip").click(function() {
    $(".dinnerplates").toggle();
});
});