关于HTML网页中标题栏鼠标经过事件怎么实现
如上图中，当鼠标移动到“素质工程”时背景是红色，当移动到“法律服务”时，“法律服务”颜色变成红色，而“素质工程”颜色变成灰色，对应的下面内容也是相对变化的，请问怎么实现。...
如上图中，当鼠标移动到“素质工程”时背景是红色，当移动到“法律服务”时，“法律服务”颜色变成红色，而“素质工程”颜色变成灰色，对应的下面内容也是相对变化的，请问怎么实现。
我写的：
<style type="text/css">.box{ width:500px; height:500px; margin:0 auto; }.bj{ padding:10px; }.border{ border:2px solid #CCC }.bt_box{ width:498px; height:32px; }.news_box{ width:478px; height:441px; margin-top:5px; }.bt_left{ text-align:center; line-height:31px; font-weight:bolder; float:left; width:90px; height:31px; }.bt_right{ text-align:center; line-height:31px; font-weight:bolder; float:left; margin-left:1px; width:90px; height:31px; }.bt_more{ float:right; width:90px; height:31px; }.Off{ background-color: #e5e5e5;} .up{background-color: #b00007;} .bt_more{ font-size:14px; text-align:center; line-height:31px;}</style></head><body><div class="box"> <div class="bt_box border"> <div class="bt_left up" onmouseover="this.className='off'" onmouseout="this.className='up'">素质工程</div> <div class="bt_right Off" onmouseover="this.className='up'" onmouseout="this.className='off'">法律服务</div> <div class="bt_more"><a href="#">更多》</a></div> </div> <div class="news_box border bj"></div></div></body>
使用鼠标触发来完成 展开
我写的：
<style type="text/css">.box{ width:500px; height:500px; margin:0 auto; }.bj{ padding:10px; }.border{ border:2px solid #CCC }.bt_box{ width:498px; height:32px; }.news_box{ width:478px; height:441px; margin-top:5px; }.bt_left{ text-align:center; line-height:31px; font-weight:bolder; float:left; width:90px; height:31px; }.bt_right{ text-align:center; line-height:31px; font-weight:bolder; float:left; margin-left:1px; width:90px; height:31px; }.bt_more{ float:right; width:90px; height:31px; }.Off{ background-color: #e5e5e5;} .up{background-color: #b00007;} .bt_more{ font-size:14px; text-align:center; line-height:31px;}</style></head><body><div class="box"> <div class="bt_box border"> <div class="bt_left up" onmouseover="this.className='off'" onmouseout="this.className='up'">素质工程</div> <div class="bt_right Off" onmouseover="this.className='up'" onmouseout="this.className='off'">法律服务</div> <div class="bt_more"><a href="#">更多》</a></div> </div> <div class="news_box border bj"></div></div></body>
使用鼠标触发来完成 展开
展开全部
这种标签切换一般网上都有源代码样例，我只说一下实现的原理
素质工程——DIV1
法律服务——DIV2
其中DIV1和DIV2两个位置一模一样
“素质工程”和“法律服务”两个链接里面href="javascript:void(0)"
“素质工程”增加onmouseover事件，显示DIV1，隐藏DIV2，改变样式为白字红底
“法律服务”增加onmouseover事件，显示DIV2，隐藏DIV1，改变样式为白字红底
涉及到styley样式的display属性，color属性还有background-color属性
素质工程——DIV1
法律服务——DIV2
其中DIV1和DIV2两个位置一模一样
“素质工程”和“法律服务”两个链接里面href="javascript:void(0)"
“素质工程”增加onmouseover事件，显示DIV1，隐藏DIV2，改变样式为白字红底
“法律服务”增加onmouseover事件，显示DIV2，隐藏DIV1，改变样式为白字红底
涉及到styley样式的display属性，color属性还有background-color属性
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个要用js实现，楼上那个答案，鼠标不经过那两个，难道两个都显示灰色么？这肯定不是你想的
我这给你用jquery写一个。给那两个给相同的class=“bt_same”
$('.bt_same').hover(function(){
$(this).siblings().removeClass('back-red');
$(this).addClass('back-red');
});
我这给你用jquery写一个。给那两个给相同的class=“bt_same”
$('.bt_same').hover(function(){
$(this).siblings().removeClass('back-red');
$(this).addClass('back-red');
});
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
bt_left bt_right:hover{background-color:red}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
