判断鼠标点击在div外时,更改背景图片

学习起步时,本人试着在web端界面上仿照qq客户端主菜单,做出了一个界面。

当做到qq主菜单的搜索框时,发现点击搜索框后,里面的背景图片会消失,如下面2张图所示:

    

点击前                                                                      点击后

尽管类似这种判断鼠标是否点击在div外,以更改背景图片的应用在web开发中并不多见,但是我们还是需要明白,应如何实现对鼠标是否点击在div外的判断。

在这里,我采用了如下代码:

$(document).click(function(e)             //e代表事件,在firefox中只能在事件现场使用window.event
{
      var target=$(e.target);                     //把触发这次点击事件对象拿出来,在本例中,即id为“sousuokuang”的div
      if(!target.is(‘#sousuokuang‘))           //判断出发点击事件的对象名称是否为"sousuokuang"
{
      //alert("hello!");    调试时用到的,可以忽略
      document.getElementById("sousuokuang").style.background= "url(‘sousuo.png‘) no-repeat -2px -7px";

//如果不是"sousuokuang",保持它的背景图片不变
}
else
{
      document.getElementById("sousuokuang").style.background="white";

//如果是"sousuokuang",将它的背景色变为白色
}
});

下面是搜索框对应的html和css代码:

<html>

<head>
           <title>qq界面</title>
           <script src="jquery-3.1.0.min.js"></script>  //我从网上下载的jquery库,由于上面的js代码中用到了jquery语言,务必要把该库加载进去
           <script src="qq.js"></script>

<style>

#sousuokuang

{
                     border: 0px;
                     height: 28px;
                     width: 277px;
                     background: url("sousuo.png") no-repeat -2px -7px;

</style>

<head>

<body>

<input id="sousuokuang"  />

</body>

</html>

当然,关于搜索框input的value值、以及由于背景图片切换后文字颜色也应随之更改等的细节部分,上文代码中并未体现。为避免本文造成误解,文章会随时改进。

时间: 2024-10-22 12:27:25

判断鼠标点击在div外时,更改背景图片的相关文章

CSS实例:鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

cell添加选中时的背景图片、显示图片和图片自适应框的大小

1.给cell添加选中时的背景图片 UIView *myview = [[UIView alloc] init]; myview.frame = CGRectMake(0, 0, 320, 47); myview.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"0006.png"]]; cell.selectedBackgroundView = myview; 2.显示图片 CGRect my

用JS去设置HTML页面鼠标悬浮时改变背景图片

首先将每一个li上面添加一个移入事件onmouseover;在悬浮事件里面设置event事件源 JS样式里首先应该找到页面里的ul 然后在ul里面的所有li var ln = bg.querySelectorAll("li"); 在移入函数中获取触发事件元素    var leg = e.target;//获得触发事件元素   target 事件属性可返回事件的目标节点(触发该事件的节点), 在循环里面初始化背景图片 设置鼠标悬浮时背景图片 event事件源触发了鼠标悬浮事件 如果在初

Javascript判断鼠标点击右击事件

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //去掉默认的contextmenu事件,否则会和右键事件同时出现. document.on

div可以同时设置背景图片和背景颜色吗?

前言 当然可以同时设置 当图片背景色不透明时 情况一:当图片的长.宽 >= div的长.宽时 我们最终看到div背景是图片,之所以说是最终看到,是因为在页面加载时,我们先看到的div背景是颜色,等加载完了之后,图片位于颜色之上,因为长宽相同,图片覆盖颜色,最终呈现出来 情况二:当图片的长.宽 < div的长.宽时 我们最终看到div背景是既有图片又有颜色,图片范围外div范围内显示的是颜色 当图片背景色透明时 无论图片的长.宽 >= div的长.宽还是图片的长.宽 < div的长.

as3 判断鼠标在非透明区域点击图片

/** *鼠标事件 * @param evt * */ private function mouseDownHandler(evt:MouseEvent):void { if(evt.currentTarget is SceneObject) { //判断当前点击区是否在最小图形范围内 var bmd:BitmapData = new BitmapData(evt.currentTarget.width,evt.currentTarget.height,true, 0x00000000); bm

用iTween实现一个鼠标点击一个地方平面中间出现一个向上抛然后下落的球

首先我们创建一个平面, 就用Cube来创建把,来X和Z设置成10,然后我们就有了一个地形了,然后我们创建需要生成的球,然后我们创建一个空物体,把我们的这个球放到这个空物体下面,然后制作成prefabs,然后我们建一个图标,这里我们就用Cube来代替这个图标,把颜色修改为红色,我们还需要创建一个空物体,让他离我们的地形Y为0.5f,主要是为了在这个地方实例化出球,然后我们在这个空物体上写一个C#脚本, 代码如下: using UnityEngine;using System.Collections

CSS鼠标点击式变化图片透明度

今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性. 如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制.第一种使用:hover伪类选择器,本示例使用第二种. 先看最后效果: 第一步:放置图片 <ul id="test">        <li>            <

C# 在获得鼠标点击事件时,如何判断Control键,Shift键被按下

在C#的窗体程序中,获得鼠标点击的事件时,想要得知当前是否有Control键,Shift键等是否被按下. 1 private void xxx_MouseClick(object sender, MouseEventArgs e) 2 { 3 if ((Control.ModifierKeys & Keys.Control) == Keys.Control)// CTRL is pressed 4 { 5 6 } 7 8 if ((Control.ModifierKeys & Keys.S