鼠标提上去弹出提示层(定位)

希望的效果如图:

网上找了各纯css的 做了下修改:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style>
.logo1{
    width:150px;
    height:60px;
    float:left
}
a.alt{
position:relative;
background-color:#fff;
float:left;
width:158px;
height:60px;
border:1px solid #ccc;
text-align:center;
text-decoration:none;
color:#333333;
}
a.alt:hover{background:#fff; text-decoration:none;z-index:2;}
a.alt div{display:none;}
a.alt:hover div{
    display:block;
    position:absolute;
    top:-1px;
    left:-300px;
    width:300px;
    height:300px;
    border:2px solid #000;
    z-index:1;
    background-color:#fff;
}
.brandAlertCen{
    border:1px solid #000;
    width:300px;
    height:300px;
}
</style>
<div style="margin-left:500px;width:300px;height:auto">
    <div class="logo1"><a class=‘alt‘ href="#"><div class="brandAlertCen">专注于网页特效及广告代码。<br /><img src="http://p0.jmstatic.com/pop_feature/12812/new_pre_pic.png" width="280" /></div><img src="http://images.253.com/upload/brandImages/139865426888345.jpg" /></a></div>
    <div class="logo1"><a class=‘alt‘ href="#"><div class="brandAlertCen">专注于网页特效及广告代码。<br /><img src="http://p0.jmstatic.com/pop_feature/12812/new_pre_pic.png" width="280" /></div><img src="http://images.253.com/upload/brandImages/139865426888345.jpg" /></a></div>
    <div class="logo1"><a class=‘alt‘ href="#"><div class="brandAlertCen">专注于网页特效及广告代码。<br /><img src="http://p0.jmstatic.com/pop_feature/12812/new_pre_pic.png" width="280" /></div><img src="http://images.253.com/upload/brandImages/139865426888345.jpg" /></a></div>
    <div class="logo1"><a class=‘alt‘ href="#"><div class="brandAlertCen">专注于网页特效及广告代码。</div><img src="http://images.253.com/upload/brandImages/139865426888345.jpg" /></a></div>
    <div class="logo1"><a class=‘alt‘ href="#"><div class="brandAlertCen">专注于网页特效及广告代码。</div><img src="http://images.253.com/upload/brandImages/139865426888345.jpg" /></a></div>
</div>

demo下载地址:

http://down.51cto.com/data/1511860

鼠标提上去弹出提示层(定位)

时间: 2025-01-10 13:06:08

鼠标提上去弹出提示层(定位)的相关文章

工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了 不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现 鼠标点击 弹出 隐藏 div隐藏

jQuery地图热点效果-鼠标经过弹出提示层信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>地图热点效果-鼠标经过弹出提示信息</title><meta http-equiv="Content-Type" content="

Jquery实现鼠标hover图片遮罩弹出提示层特效

1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img").hover(function() { $(this).parent('div.tip_trigger').css({ 'background': '#8de08b', 'z-index': '1000' }); $('#h_coolsite .block').show(); tip = $(th

鼠标悬浮在超链接上弹出提示框

鼠标悬浮在超链接上弹出提示框:大家知道超链接有一个title属性,当鼠标放在链接的时候,可以出现一个提示框效果,不过自带的效果虽然廉价但往往并不物美,所以需要自定义一个,下面是一个纯CSS实现的这样的效果,和大家分享一下.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

JavaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认或取消.其实部分想要的功能可以从中截取. js代码: 1 <script type="text/javascript"> 2 function sAlert_jobdel(str){ 3 var msgw,msgh,bordercolor; 4 msgw=400;//提示窗口的

基于Jquery 简单实用的弹出提示框

引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

[转]【C#】分享一个弹出浮动层,像右键菜单那样召即来挥则去

适用于:.net2.0+ Winform项目 背景: 有时候我们需要开一个简单的窗口来做一些事,例如输入一些东西.点选一个item之类的,可能像这样: 完了返回原窗体并获取刚刚的输入,这样做并没有什么问题,但在几天前我突然产生了一些想法:为什么非得有板有眼的弹出一个窗体给用户呢,是不是可以在按钮附近迅速呈现一个层来做这些事呢,类似快捷菜单那样,用户高兴就在里面做一下该做的事,不高兴就在其它地方点一下它就消失,本来很轻便快捷的操作,DUANG~弹出一个窗体来会不会令用户心里咯噔一下呢,感受层面的事

jQuery - 选中复选框则弹出提示框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>判断是否选中</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <script