Question

我在网页上有以下代码，它的工作是：当鼠标刚好翻过图像时，会出现一个新窗口，当鼠标熄灭时，它会消失。它所做的一切都还可以，但我只是希望它在我点击图像时出现，当我点击新窗口外时它会消失。检查一下。需要帮助

标题中的代码：

<style type="text/css">
a.imPop {
position:relative;
z-index:0;
}  
a.imPop:hover {
display:inline;
z-index:auto;
} 
a.imPop span {  
display:none;  
}
a.imPop:hover span {
display:inline;
position:left;
top:1em;
left:1em;
width:128px;
height:128px;
}

</style>

正文中的代码：

<a class="imPop" title="" style="color:#0000FF" font:large""> 
 <img src="images/1.gif" alt="" /><span>

<img src="images/2.jpg alt="" />


        </span> </a>

Answer 1

如果你在页面上有这样的东西，就会在jquery中做到这一点：

jQuery(document).ready(function($) {
    //this tracks the click on the class
    $('.imPop').on('click', function(event) {
        event.preventDefault();
        /* Act on the event */
              //this shows your span
        $('.imPop span').show();
    });
       //now this is flaky because you are looking for a click on the body tag of the   html it would be better to look for your page wrapper div and track clicks on that outside of the box
    $('body').on('click', function(event) {
        event.preventDefault();
        /* Act on the event */
           //this hide's the one you just showed!
        $('.imPop span').hide();
    });
});

将它放在结束标记之前：

<script>
jQuery(document).ready(function($) {
    $('.imPop').click( function(event) {
        event.preventDefault();
        /* Act on the event */
        $('.imPop span').show();
    });
    $('body').click(function(event) {
        event.preventDefault();
        /* Act on the event */
        $('.imPop span').hide();
    });
});
</script>

试试这个：

        <script>
jQuery(document).ready(function($) {
  $('.imPop').click( function(event) {
        event.preventDefault();
        /* Act on the event */
        $(this).children('span').show().addClass('showed');
    });
  $('body').click(function(){
    event.preventDefault();
    $('.showed').hide().removeClass('showed');
  });
});
    </script>

如何更改打开新窗口的方法

1 个答案: