用CSS做了一个鼠标经过弹出一个图片，结果图片一直闪烁，求告知是否哪里写错了？要怎么改？

Posted 2023-05-15

JS被禁用了,我只知道这个方法了...
可是图片一直闪烁...求大神指点下.或者告知还有什么方法可以在html上做鼠标事件/

<style type="text/css">
.user_div
width: 990px;
height: 595px;
background: url(http://img10.360buyimg.com/imgzone/g14/M01/15/15/rBEhV1MZRWoIAAAAAAL8Dbrd440AAJuggJmh1EAAvwl202.jpg) top center no-repeat;

.user_div1
position: absolute;
left: 445px;
top: 205px;
cursor: pointer;
width: 170px;
height: 128px;
display: block;

.user_div1 a
display: block;
width: 170px;
height: 128px;

.user_div1 a:hover
background: url(http://img10.360buyimg.com/imgzone/g13/M07/1A/0D/rBEhVFMZRYUIAAAAAAAS55egpmUAAJn1QFLhn8AABL_590.jpg) no-repeat;
position: relative;
text-decoration:none;/*属性规定添加到文本的修饰*/
border:1px solid #d3d3d3;/*边框*/
border-radius:5px;/*边框圆角*/
-moz-border-radius:5px;/*火狐浏览器支持*/
-webkit-border-radius:5px;/*火狐浏览器支持*/
left:100px;/*属性规定元素的定位类型*/
-webkit-transition:top 500ms ease;/*火狐浏览器支持*/
-moz-transition:top 500ms ease;/*火狐浏览器支持*/
-ms-transition:top 500ms ease;/*火狐浏览器支持*/
-o-transition:top 500ms ease;/*火狐浏览器支持*/
transition:top 500ms ease;
-webkit-box-shadow:0 1px 8px rgba(0,0,0,.3);
box-shadow:0 1px 8px rgba(0,0,0,.3);
border-color:#d3d3d3;
overflow:hidden;/*属性规定当内容溢出元素框时发生的事情*/

</style>
<div style="height:600px;width:990px;">
<div class="user_div">
<div class="user_div1">
<a href="#" target="_blank" title=""></a>
</div>
</div>
</div>

left:100px;去掉就好了，可以用float之类的做，然后width里面加一点宽度，float:left 或者right一般就能定位了。

用类似mouseover 的也能做。类似下面这种，希望对你有启发。

<a href="#" target="_blank" title="">
    <img src="1.jpg"
         onmouseover="this.src='2.jpg';"
         onmouseout="this.src='3.jpg';">
    </img>
</a>

追问

我要在同一个div里做多个div 如果width太宽了会不会有冲突？
onmouseover 这个怎么定位？

追答

img 里面用css 就可以定位了，你可以用ie的调试工具（F12），自己调试一下，马上就能看出问题在哪里。具体还要靠自己调试出来。

追问

不好意思 再问下onmouseover 做定位 应该是定位整张img 我要的定位是 鼠标放上去 弹出来的图片定位 这个也可以吗?我刚才试了下 还是不行

追答

不太明白你的要弹出来是什么意思，如果要弹出什么的话，没有js貌似不行的。

追问

就是鼠标经过后 弹出一张图片 这张图片可以定位

追答

你这个问题是mouse 移动起来，不停的刷hover，貌似不用js或jquery没有什么好的方法。

追问

已经解决 谢谢啦

参考技术A <div class="user_div1">
<a href="#" target="_blank" title="" onmouseover="document.getElementById('aa').style.display='';" onmouseout="document.getElementById('aa').style.display='none';"></a>
<img id="aa" src="http://img10.360buyimg.com/imgzone/g13/M07/1A/0D/rBEhVFMZRYUIAAAAAAAS55egpmUAAJn1QFLhn8AABL_590.jpg" style="display:none">
</div>
看这样行不行，如果行的话，你可以把图片定下位就可以了追问

这个我在本地网页上测试 不管用啊 onmouseover 没有触发

参考技术B <script language="javascript">
function onMouse()

document.getElementById(changeColor).style.background-color = '#000000';

function outMouse() ...追问

不能有script脚本哦 JS被禁用了

追答

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：
a:link color: #FF0000 /* 未访问的链接 */
a:visited color: #00FF00 /* 已访问的链接 */
a:hover color: #FF00FF /* 当有鼠标悬停在链接上 */
a:active color: #0000FF /* 被选择的链接 */
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与 CSS 类配合使用：
a.red:visited color: #FF0000;

CSS Syntax
如果上面这个例子中的链接已访问过，那么它会显示为红色。

鼠标停留在文字上 出现一个悬浮框！！

asp.net/C# 的网站 现在需要鼠标停留在各个小标题的时候 显示出来一个详细信息的框 里面的内容 由标题的内容而动态生成 有图片文字 就像淘宝商品显示一样 停留在商品的小图标 上显示出来一个大图

参考技术A 用div+css就很好做出来的。给你个例子：
<a href="#">这里可以放img<div></a>这里放Label，内容后台绑定</div>
css:
a divdisplay:none;
a:hover divdisplay:block;position:relative;left:0;top:0; 参考技术B JS弹出的效果不好，要用ajax或是extjs本回答被提问者采纳 参考技术C 怎么地 你想做？ js 制定一下 弹出层的 img的 url 就可以了 这个只是一种简单的。。