代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'test.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
.id1 {
width: 270px;
height: 35px;
background-color: teal;
display: block;
}
.id2 {
width: 270px;
height: 70px;
background-color: teal;
line-height:35px;
display: none;
}
.id3 {
width: 270px;
height: 70px;
background-color: teal;
line-height:35px;
display: block;
}
</style>
</head>
<body>
<script language="javascript">
function displayDiv1(){
var oDiv1=document.getElementById("id1");
var oDiv2=document.getElementById("id2");
oDiv1.className="id1";
oDiv2.className="id2";
}
function displayDiv2(){
var oDiv2=document.getElementById("id2");
var oDiv1=document.getElementById("id1");
oDiv1.className="id2";
oDiv2.className="id3";
}
</script>
<div id="id1" class="id1" onmouseover="displayDiv2()">
层一
</div>
<div id="id2" class="id2" onmouseover="displayDiv2() onmouseout="displayDiv1()">
层二
</div>
</body>
</html>
相关推荐
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
3. **CSS样式控制**：为了实现div的浮动和显示，我们可能需要通过JS动态改变div的CSS样式，比如`display`属性，使其在鼠标移到input上时变为可见。 接下来，我们详细讲解实现这个功能的步骤： 1. **选择元素**：...
jquery/js实现鼠标点击一个div,另一个div变色demo
在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...
总结，通过纯CSS3，我们可以实现一个鼠标移入div图片后按钮飞入的动画效果，这不仅简化了代码，减少了对JavaScript的依赖，还能够提供流畅的用户体验。你可以根据自己的需求调整动画参数，如速度、位置和动画曲线，...
通过以上步骤，你就可以在网页上实现一个基本的jQuery鼠标移入显示悬浮框的效果。这个功能可以应用到各种元素上，比如图片、链接、按钮等，为用户提供更直观的反馈信息。在实际开发中，你可能还需要考虑一些高级特性...
关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能，这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如，在一个产品...
本文将详细介绍如何在Vue项目中实现鼠标移入时添加一个class样式，而鼠标移出时则移除该样式（通常是添加或移除名为"active"的class），以及相关的实现方法和拓展知识。 首先，要在Vue组件中实现鼠标移入移出的...
这段代码会监听`hoverElement`元素的`mouseover`事件，当鼠标移入时，显示`hoverDiv`；当鼠标移出时，隐藏`hoverDiv`。注意，这里的`mouseout`事件是为了在鼠标离开`hoverElement`时恢复初始状态。 除了上述的基本...
### JavaScript 实现鼠标移入图片放大效果 #### 知识点概述 在现代网页开发中，为提升用户体验，常会采用各种动态效果。其中一种常见的交互效果是当鼠标悬停在图片上时，图片能够局部放大显示，让用户更清晰地查看...
js 实现 鼠标移入移出时颜色变化! 值得下载看看!资源免费,大家分享!!
在这个项目中，jQuery用于监听鼠标移入事件，触发遮罩层的显示，并可能配合CSS3来实现更复杂的动画效果。 3. **鼠标事件**：jQuery提供了丰富的事件处理功能，如`mouseenter`和`mouseleave`事件，它们分别在鼠标...
在网页设计中，"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术，主要用于增强用户体验，提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素，当用户将鼠标悬停在某个元素上时，会有一...
在网页设计中，"鼠标悬停某个标记时的DIV层显示"是一种常见的交互效果，它增强了用户与网页的互动性。这种效果通常是通过JavaScript库，如jQuery，配合Ajax技术来实现的。接下来，我们将深入探讨如何利用jQuery和...
本文将深入探讨如何使用JavaScript实现一个实用且美观的鼠标移入移出卡片切换内容的功能，并通过具体示例来展示其实现过程。 #### 一、项目概述 本案例旨在创建一个响应式的卡片菜单系统，当用户鼠标移入卡片时，...
在本示例中，我们将详细探讨如何利用伪元素`:before`和`:after`以及CSS3的过渡（transition）属性，实现鼠标移入时下划线从中间向两边展开的效果。 首先，我们需要创建一个基础的HTML结构，包含一个ID为"underline...
当鼠标悬停在其中一个div上的时候，会自动翻转，呈现立体式效果，显示说明或者简介等其他信息 鼠标移走后立体式回转，效果很不错 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的...
在今天的知识分享中，我们将探讨如何利用JQuery实现一个常见的网页交互效果：鼠标移上元素时弹出提示框，鼠标移出时提示框消失。这一交互功能在用户界面设计中非常实用，能够有效地为用户提供额外的信息或说明。 ...
HTML 结构中，我们可以看到一个基本的轮播图结构，包括一个外层容器 `<div class="banner">`，里面包含一个无序列表 `<ul class="pic">`，该列表中包含多个 `<li>` 元素，每个 `<li>` 元素中包含一个 `<img>` 元素...
2. **事件监听**：添加鼠标移入移出事件监听器，实现滚动暂停与恢复的功能。 3. **定时器**：通过`setInterval`和`clearInterval`控制元素的滚动行为。 ### 示例代码解析 #### HTML 结构 ```html <div align=...