js+css 简单的高亮选中对象

news/2024/7/10 23:55:42 标签: css, html, jquery
htmledit_views"> 功能:
点击列表中的对象时,为选中对象加上边框(高亮显示)。

实现过程:
1.为每个对象指定html" title=css>css名称:myhtml" title=css>css
2.定义两个html" title=css>css,一个overhtml" title=css>css,一个outhtml" title=css>css
3.通过myhtml" title=css>css为每个对象绑定mouseover,mouseout,click三个事件的处理,在处理中操作html" title=css>css从而实现选中对象时的高亮显示。

注:本文使用了jquery用于方便定位对象。

以下是sample:

$(".myclip-item-link").mouseover(function() {
// 鼠标移到超链接上时,加上边框
$(this).addClass("myclip-item-over");
}).mouseout(function() {
// 鼠标移出超链接时,去掉边框
$(this).removeClass("myclip-item-over");
}).click(function(){
// 点击超链接后,加上高亮边框(同时去掉其它超链接的高亮边框)
$(".myclip-item-link").removeClass("myclip-item-highlight");
$(this).addClass("myclip-item-highlight");
});


html">
<style>
.myclip-item-link {
display: block;
height: 105px;
outline-style: solid;
outline-color: #AAAAF0;
outline-width: 1px;
}

.myclip-item-over {
outline-style: solid;
outline-color: #FFAAA0;
outline-width: 2px;
}

.myclip-item-highlight {
outline-style: solid;
outline-color: #FFAAA0;
outline-width: 3px;
}
</style>



html">
...
...
...
<ul>
<li>
<div class="myclip-item">
<a href="javascript:void(0);" class="myclip-item-link">
<div>
<img src="img/1.gif" alt="" width="75" height="75">
</div>
<div class="myclip-item-desc">
2012/08/22 17:42:30
</div>
</a>
</div>
</li>
<li>
<div class="myclip-item">
<a href="javascript:void(0);" class="myclip-item-link">
<div>
<img src="img/2.jpg" alt="" width="75" height="75">
</div>
<div class="myclip-item-desc">
2012/08/22 17:42:30
</div>
</a>
</div>
</li>
</ul>
...
...
...

http://www.niftyadmin.cn/n/1730323.html

相关文章

Excel2007绘制表格边框

Excel2007里追加了直接绘制表格边框的功能&#xff0c;就像拿着笔画边框似的&#xff0c;很方便。[img]http://dl.iteye.com/upload/attachment/0072/8363/d855709e-f612-3d9b-b6c8-37b20a7d2695.jpg[/img]

eclipse技巧:切分窗口

在ue和ep等编辑器里有水平切分窗口的功能&#xff0c;对于编辑需要上下参照的大文件很方便。eclipse中也有这个功能&#xff0c;功能更强&#xff0c;窗口个数不限&#xff0c;切分次数不限&#xff0c;切分方向不限&#xff1a;1.在打开的文件标签上点击右键&#xff0c;选择“…

右键菜单加入DOShere

Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\Folder\shell\Open_DOS_Box] "[进入DOS]"[HKEY_CLASSES_ROOT\Folder\shell\Open_DOS_Box\command] "cmd.exe /s /k pushd \"%V\""转自&#xff1a;http://bbs.pcbeta.com/forum.php?mo…

Java 命令指定log4j配置文件

命令行模式下执行class文件时&#xff0c;指定log4j的配置文件&#xff1a;java -cp %CLASS_PATH% -Dlog4j.configuration"file:./log4j.properties" a.b.MainClass

整数相除时要注意

整数/整数整数。当需要保留小数位时&#xff0c;需要强制类型转换。 表达式计算结果精度与被除数和除数中精度最高的看齐&#xff0c;见下例&#xff1a;int a 1024; int b 2048; int c 3; System.out.println("a/b/c:" a/b/c); System.out.println("a/…

设定css使chrome打印背景色

在body中加入下面的代码即可&#xff1a; style"-webkit-print-color-adjust: exact;"转自&#xff1a; http://www.qianduanzu.com/2012102299.html

Apache ProxyPass排除指令的应用

在xampp中&#xff0c;整合好了apache于tomcat&#xff0c;配置了两个应用&#xff1a; 一个是php应用&#xff0c;通过Alias配置为虚拟目录/mytools 一个是tomcat应用tomcat_app&#xff0c;使用ProxyPass代理预想的结果是&#xff1a; 1.直接输入网址www.test.com访问tomcat_…

java中float与byte[]的互转

起因&#xff1a;想把一个float[]转换成内存数据&#xff0c;查了一下&#xff0c;下面两个方法可以将float转成byte[]。方法一import java.nio.ByteBuffer; import java.util.ArrayList; float buffer 0f; ByteBuffer bbuf ByteBuffer.allocate(4); bbuf.putFloat(buffer); …