JQuery 鼠标点击其它地方隐藏层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style  type="text/css">
.div{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;}
</style>
<script src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("input[id=search]").focus(function(even){                                               
         var pos=$(this).offset();
       
         $(".div").css({left:pos.left,top:pos.top+20+"px",display:"block"});
         });
         
        document.οnclick=function(e){
           var e=e?e:window.event;
           var tar = e.srcElement||e.target;
           if(tar.id!="search"){
               if($(tar).attr("class")=="div"){
                   $(".div").css("display","block")
               }else{
                   $(".div").css("display","none");
               }
           }
         }
    })
</script>
</head>
<body style=" padding-left:300px;">
    <input id="search" />
    <div class="div">  
        <a href="#" target="_blank">打开我的链接</a>
    </div>
</body>
</html>

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:

firefox 下的 event.target = IE 下的 event.srcElement

event.srcElement ? event.srcElement : event.target;


jQuery中,要实现鼠标滑过某个字体时隐藏其他字体,并且使其他字体缩小的效果,你可以通过绑定鼠标悬停(hover)事件,并在事件触发时使用jQuery的方法来修改元素的样式或类。以下是实现这个效果的步骤和代码示例: 1. 首先确保你的网页中已经引入了jQuery库。 2. 给所有的字体元素添加一个共同的类名,例如`font-item`。 3. 使用`.hover()`方法来绑定鼠标进入和离开事件。 4. 在鼠标进入事件中,隐藏非当前元素的其他字体,并缩小它们的尺寸。你可以通过`.siblings()`方法选取同级的其他字体元素,然后使用`.css()`方法来修改它们的`display`和`font-size`属性。 5. 在鼠标离开事件中,将所有字体恢复到原始状态。同样使用`.css()`方法来修改`display`和`font-size`属性。 示例代码如下: ```javascript $(document).ready(function() { $('.font-item').hover( function() { // 鼠标进入事件 $(this).siblings().css({ 'display': 'none', // 隐藏其他字体 'font-size': '0px' // 将字体大小设置为0 }); }, function() { // 鼠标离开事件 $(this).siblings().css({ 'display': 'block', // 显示其他字体 'font-size': '16px' // 恢复原始字体大小,假设原始大小为16px }); } ); }); ``` 在这段代码中,`.font-item`是你所有字体元素的类名。当鼠标悬停在任何一个字体元素上时,其他的字体元素会被隐藏并缩小至0px的字体大小。当鼠标离开时,其他字体元素会恢复原来的显示状态和字体大小。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值