css中这个鼠标悬停效果怎么做（求代码），如图

如题所述

举报该文章

相关建议推荐于2018-04-20

以上需要的文件及图片

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

/* 公用 */

body{ margin:0; overflow:hidden;}

img{ display:block;}

span{ display:block;}

a{ text-decoration:none; display:block; color:#000;}

p,h1,h2,h3,h4{ margin:0; font-weight: normal; font-size:12px;}

ul{ margin:0; padding:0;}

input{ margin:0; padding:0; outline:none; border:none;}

body{ font-family:"微软雅黑"; font-size:14px; background-color:#f2f2f2;}

body h2,h3,h4{ color:#000;}

ul{ margin:0; padding:0;}

li{ list-style:none;}

.clearfix{ clear:both;}

/*内容*/

.nav_box>li{ position:relative; float:left; width:100px; text-align:center; margin-top:10px; height:30px; cursor:default;}

.nav_box>li>h2{ border-right:1px solid #ccc; height:16px; margin-top:7px; font-weight:bold; width:90px; display:block; text-align:left; padding-left:16px; box-sizing:border-box;}

.nav_box>li>img{ position:absolute; top:12px; right:18px;}

.subnav_box{ position:absolute; top:30px; right:0px; width:300px; height:400px; background-color:#fff; box-sizing:border-box; padding:20px;}

.subnav_box ul{ float:left; margin-right:20px;}

.subnav_box ul>li{ line-height:24px;}

.nav_box>li:hover{ background-color:#fff;}

.nav_box li:hover .subnav_box{ display:block;}

</style>

$(function(){

$(".nav_box>li").mouseenter( function(){

$(".nav_box>li").children(".subnav_box").hide();

$(this).children(".subnav_box").show();

$(this).children("img").attr("src","img/arrow_bottom_gary.png");

}).mouseleave( function(){

$(".nav_box>li").children(".subnav_box").hide();

$(this).children("img").attr("src","img/arrow_top_gary.png");

}

);

})

</script>

</head>

<body>

</li>

<ul>

</ul>

<ul>

</ul>

</div>

</li>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</li>

</ul>

</body>

</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/22smsfmff.html

其他看法

第1个回答 2018-04-19

你好，可以尝试使用单纯的css进行设置：
鼠标悬浮hover到ul的时候，li标签为dipaly设置为block；
默认的时候设置为：none；

第2个回答 2013-06-01

<!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>鼠标悬停</title>
<style>
body{margin:0; padding:0; font-size:12px; font-family:Microsoft Yahei; }
ul,li{margin:0; padding:0; list-style-type:none;}
#item_info{ }
#item_info .tab{background:#f3f3f3; height:29px; overflow:hidden; }
#item_info .tab ul{width:1000px; height:28px; margin:0 auto; }
#item_info .tab li{float:left; height:28px; line-height:28px; }
#item_info .tab li a{ display:inline-block; padding:0px 20px; height:28px; line-height:28px; text-decoration:none; background:url(../images/tab_off.gif) repeat-x; color:#666; font-size:12px; text-align:center; border-right: 1px solid #ddd; border-bottom:1px solid #ddd; }
#item_info .tab li a.on{background:#fff; font-weight:bold; text-decoration:none; color:#333; border-bottom:1px solid #fff; }
#item_info .tab li a.null{border-right: 1px solid #ddd; border-bottom:1px solid #fff; width:0px; padding:0; overflow:hidden; }

#item_info .info{ margin:0 auto; width:1000px; }
#item_info .info ul{display:none; width:270px; padding:5px; border:1px solid #ddd; border-top:0px; line-height:22px; overflow-y:auto;}
#item_info .info ul.on{display:block;}
#item_info .info ul dl{float:left; width:86px; margin:0; padding:0;}
#item_info .info ul dl dt{ font-weight:bold;}
#item_info .info ul dl dd{margin:0; padding:0; list-style-type:none; }
#item_info .info ul a{color:#666; text-decoration:none; }
#item_info .info ul a:hover{color:#C00; text-decoration:underline; }
</style>
</head>

<body>
<div id="item_info">
<div class="tab">
<ul>
<li><a href="javascript:void(0);" hidefocus="hidefocus" class="null" id="tab_0"></a></li>
<li><a href="javascript:void(0);" hidefocus="hidefocus" id="tab_1">手机京东</a></li>
<li><a href="javascript:void(0);" hidefocus="hidefocus" onmouseover="showInfo(2);" onmouseout="hiddenInfo(2);" id="tab_2">客户服务</a></li>
<li><a href="javascript:void(0);" hidefocus="hidefocus" onmouseover="showInfo(3);" onmouseout="hiddenInfo(3);" id="tab_3">网站导航</a></li>
</ul>
</div>
<div class="info">
<ul id="info_2" onmouseover="showInfo(2);" onmouseout="hiddenInfo(2);" >
<li><a href="javascript:void(0);">帮助中心</a></li>
<li><a href="javascript:void(0);" rel="nofollow">售后服务</a></li>
<li><a href="javascript:void(0);" rel="nofollow">在线客服</a></li>
<li><a href="javascript:void(0);" rel="nofollow">投诉中心</a></li>
<li><a href="javascript:void(0);">客服邮箱</a></li>
</ul>
<ul id="info_3" onmouseover="showInfo(3);" onmouseout="hiddenInfo(3);" >
<dl class="item fore1">
<dt>特色栏目</dt>
<dd>
<div><a href="javascript:void(0);">视频购物</a></div>
<div><a href="javascript:void(0);">京东社区</a></div>
<div><a href="javascript:void(0);">在线读书</a></div>
<div><a href="javascript:void(0);">装机大师</a></div>
<div><a href="javascript:void(0);">礼品卡</a></div>
<div><a href="javascript:void(0);">家装城</a></div>
</dd>
</dl>
<dl class="item fore2">
<dt>企业服务</dt>
<dd>
<div><a href="javascript:void(0);">企业客户</a></div>
<div><a href="javascript:void(0);">办公直通车</a></div>
</dd>
</dl>
<dl class="item fore3">
<dt>旗下网站</dt>
<dd>
<div><a href="javascript:void(0);">360TOP</a></div>
<div><a href="javascript:void(0);">迷你挑</a></div>
<div><a href="javascript:void(0);">English Site</a></div>
</dd>
</dl>
</ul>
</div>
</div>
<script language="javascript" type="text/javascript">
// 显示
function showInfo(id) {
document.getElementById("tab_" + id).className = "on";
document.getElementById("info_" + id).className = "on";
}
// 隐藏
function hiddenInfo(id){
document.getElementById("tab_" + id).className = "";
document.getElementById("info_" + id).className = "";
}
</script>
</body>
</html>本回答被网友采纳

第3个回答 2013-05-30

实现这个功能是js的事情，css只是定义下界面。
百度：js tab切换

如何用css设置鼠标悬停的状态样式?
1、首先我们先来编写一个HTML框架 2、我们来创建一个a标签，进行超链接的展示；3、我们接下来书写head书签，在其中进行书写其他编写；4、接着书写style标签，在其中书写css代码；5、我们利用a:link 进行对未点击的超链接进行样式设置；6、接着利用a:visited进行对已点击的超链接进行设置；7、最后，我们...

css里鼠标悬停变色怎么弄
1、首先新建一个html文件，命名为test.html，在test.html文件内，使用table标签创建一个表格，用于测试。2、在test.html文件内，设置table标签的class属性为mytable，同时设置边框为1px。3、接着在css标签内，通过class设置表格的样式，定义它的宽度为300px,高度为200px。4、在css标签内，通过td元素名称...

如何在网页中实现鼠标悬停文字显示效果?
1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p {display: none; }”；再给div设置宽和高，这里...

如何用css设置鼠标属性的小手
首先，你需要在HTML元素的CSS样式中找到cursor属性。这个属性控制元素鼠标悬停时的指针形状。你可以直接在元素的选择器后面添加cursor样式，例如：或者，如果你想在鼠标悬停时显示为"pointer"，可以使用:这里，`.your-element-class`应该替换为你的实际元素类名。当你将鼠标悬停在具有这些样式的元素上时，它...

css如何实现鼠标悬停的提示效果。
下面的代码就是css实现的鼠标悬停，你看下是不是你要的。不行就追问我。可能样式不是你想要的，你可以自行修改一下样式。<!DOCTYPE html>Document*{margin:0;padding:0;}ul{list-style-type: none;}ul>li{float:left;margin-right: 10px;position: relative;width:100px;}li>span{display: none...

CSS文本阴影text-shadow悬停效果
CSS代码如下，我们将文本实际的颜色设置透明（color:#0000）；然后通过text-shadow创建两个阴影，可选参数blur不设置，这样我们就得到了一份清晰的阴影，通过设置不同的颜色和垂直的数值即可产生炫酷的效果。.hover-1{line-height:1.2em;color:#0000;text-shadow:00#000,01.2em#1095c1;overflow:hidden...

鼠标悬停在某些内容上时,怎么展示这些内容?
1、方法一，利用html特性，每个标签都有一个title属性。当鼠标hover在该标签内容上时，浏览器展示出该标签的title内容，让鼠标移走，内容消失，如下：div{ height:100px;width:100px;background-color: aqua;} 文字内容文字内容 2、方法二，利用css的伪类hover，以及显示隐藏属性display，来实现如下：...

css如何实现鼠标悬停的提示效果
<!DOCTYPE html>Document*{margin:0;padding:0;}ul{list-style-type: none;}ul>li{float:left;margin-right: 10px;position: relative;width:100px;}li>span{display: none;position: absolute;top: 20px;background: #ccc;}li:hover >span{display: block;}提示任务中心提示通知提示装扮 ...

hover在css中的用法
当鼠标悬停在元素上时，可以通过更改元素的样式来提供反馈或交互。hover伪类可以应用于大多数css元素，包括链接、按钮、图像、表单元素和文本等。使用hover伪类的语法很简单，只需要在选择器后面加上：hover即可。例如div：hover {background-color：yellow}。这段代码表示当用户把鼠标放在div元素上时，div的...

css中的a:hover表示什么
CSS中的a:hover表示鼠标悬停在链接上时的样式效果。以下是在CSS中，a代表超链接元素，而:hover是一个伪类选择器。当这两个结合使用时，即a:hover，它表示当用户将鼠标悬停在超链接上时，该链接所应用的样式效果。开发者可以通过此选择器定义鼠标悬停时的样式，如改变颜色、添加下划线、增大字体等。这...

相似回答

大家正在搜