<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="../js/jquery.js"></script>
</header>
<style>
*{
margin:0;
padding:0;
text-align:center;
}
.contain-out{
margin:30px;
padding:5px;
width:600px;
height:160px;
border:1px solid yellow;
}
.img-contain{
float:left; /* 右侧向右浮动，需要该块级元素左浮动，否则将占整行，右侧被挤下去 */
width:18%;
height:100px;
background-color:#E8E8E8;
margin:10px;
padding:20px 0;
text-align:center;
border:1px solid black;
}
.info-contain{
float:right;
width:70%;
height:140px;
margin:10px;
border:1px solid green;
padding:5px 10px;
}
.content1{
float:left;
width:70%;
height:30px;
margin:5px 2px 2px;
border:1px solid yellow;
}
.content2{
float:left;
width:70%;
height:50px;
margin:5px 2px 2px;
border:1px solid yellow;
}
.content3{
float:left;
width:100%;
height:25px;
margin:5px 2px 2px;
border:1px solid yellow;
}
span{
height:20px;
line-height:20px;
display:inline-block;
font-size:12px;
}
.span-left{
float:left;
width:auto;
margin:0px 15px;
}
.span-right{
float:right;
margin-right:0;
}
.more{
float:right;
margin-right:15px;
width:28px;
height:30px;
position:relative;
}
.more-detail{
display:none;
position:absolute;
width:40px;
height:50px;
border:1px solid orange;
margin-top:-2px;
background-color:#E8E8E8;
z-index:0;
}
.more-tip {
background-color:white;
z-index:101;
position: relative;
}
.hover .more-tip {
border:1px solid orange;
border-bottom:0px;
background-color:#E8E8E8;
}
.hover .more-detail {
display:block;
}
</style>
<body>
<div class="contain-out">
<div class="img-contain">img</div>
<div class="info-contain">
<div class="content1">
<p>名称</p>
</div>
<div class="content2">
<p>微博列表</p>
</div>
<div class="content3">
<span class="span-left"> 信息。。。。。。。。。</span>
<div class="more" id="moreDiv">
<span class="more-tip">更多</span>
<div class="more-detail">
<p>1....</p>
<p>2....</p>
</div>
</div>
<span class="span-right"><span>评论|</span><span>转发|</span></span>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#moreDiv").hover(
function(){
$("#moreDiv").addClass("hover");
},
function(){
$("#moreDiv").removeClass("hover");
});
});
</script>
</html>
相关推荐
在网页设计中，"DIV+CSS封装的一个下拉框效果"是一种常见的交互设计技术，它通过结合HTML结构、CSS样式以及可能的JavaScript（如Jquery）来实现更加灵活且美观的下拉选择功能。这种技术相比传统的HTML下拉框（`...
标题中的“CSS学习 三角 border transparent 下拉框”是指在CSS样式设计中，如何利用边框(border)的透明属性创建三角形以及在下拉框(drop-down list)中应用这一技巧。在网页设计中，三角形通常用于指示箭头或方向，...
这时，我们可以借助JavaScript和CSS来创建一个自定义的下拉框。 在JavaScript中，我们可以监听`<select>`元素的事件，如`click`或`change`，然后动态地生成或更新HTML结构，以展示自定义的下拉选项。例如，当用户...
纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框...
HTML5 CSS3实现的自定义下拉框菜单，HTML5/CSS3自定义下拉框 3D...鼠标单击展开的那种菜单，测试时请注意，代码中调用的font-awesome.css文件为远程文件，若 此文件失效，会对菜单样式千万影响，但菜单运作不受影响。
此外，CSS3还提供了Flexbox和Grid布局，可以方便地进行复杂和响应式的布局设计，但这里可能主要依赖于传统CSS定位技术，因为3D效果通常需要对元素的绝对或相对定位。 在资源文件中，我们可以看到`index.html`是主...
在网页设计中，"div+css"是一种常见的布局方式，用于构建页面结构和样式。"div+css做的下拉框"是指使用HTML的元素和CSS（层叠样式表）来创建交互式的下拉菜单，这种技术广泛应用于网站导航栏、选择列表等场景。下面...
"js制作的鼠标悬浮时产生的下拉框效果" 本文主要讲述了使用JavaScript制作鼠标悬浮时产生的下拉框效果，并提供了两个实践例子来演示该效果的实现。 一、鼠标悬浮时产生的下拉框效果 鼠标悬浮时产生的下拉框效果是...
在这个实例中，jQuery被用来处理用户交互，如点击、鼠标悬停等，以及动态改变元素的显示状态，使下拉框的展示更加平滑、流畅。 2. **模仿Select控件** HTML的`<select>`元素是网页表单中的一种，通常用于提供一组...
在本主题中，我们将深入探讨如何利用CSS来改变下拉框（`<select>`元素）的样式，使其更加符合网站的整体设计风格。 首先，我们要理解`<select>`元素的基本结构。它通常包含一系列`<option>`元素，用户可以通过点击...
CSS（层叠样式表）是网页设计中用于控制布局和样式的语言。在这个项目中，CSS被用来设计select元素的外观，包括但不限于背景色、边框、字体、颜色以及选择框的尺寸等。特别地，项目中提到了`font-awesome`字体库，这...
为了实现这个自定义下拉框，我们需要在HTML文件中编写布局和元素，然后在CSS文件中定义样式，最后在JavaScript文件中编写控制逻辑。 以下是一个简单的实现步骤： 1. 在HTML中创建自定义下拉框的结构，包括触发按钮...
此外，CSS3的`pseudo-class`（伪类）如`:hover`, `:active`, 和`:focus`可以用来添加鼠标悬停、元素被点击或获得焦点时的特殊样式，进一步增强交互性。而`flexbox`或`grid`布局则可以帮助我们轻松地调整菜单项的排列...
2. **悬停效果**：利用`:hover`伪类为鼠标悬停在下拉框上时添加动态效果，如改变背景色或边框颜色，提高用户体验。 3. **箭头图标**：可以使用CSS伪元素`::before`或`::after`创建自定义的下拉箭头，或者如本案例中...
1. **布局**：通过CSS调整下拉框的大小、位置、边框和背景颜色，使其与页面其他元素保持一致。 2. **字体和颜色**：改变文本的字体、字号、颜色和行高，以提高可读性。 3. **箭头图标**：替换默认的下拉箭头，可以...
在这个案例中，JavaScript可能被用来监听用户与下拉框的交互，如鼠标点击、滚轮滚动等，并根据这些事件动态更新下拉框的样式。CSS则负责定义新的外观，包括但不限于颜色、大小、字体、边框、过渡效果等。由于IE特有...
根据给定的信息，本文将详细解释“js模糊查询css可编程下拉框”的实现方法及其相关的JavaScript和CSS技术要点。 ### 一、项目背景及需求分析 该项目的主要目的是创建一个可编程的下拉框功能，该功能允许用户通过...
**下拉框与下拉控件：Select2详解** 在网页设计中，下拉框（Dropdown）是一种常见的用户界面元素，用于提供多个选项供用户选择。然而，原生的HTML `<select>` 标签功能相对有限，样式单一，无法满足现代网页设计的...
例如，当用户鼠标悬停在菜单按钮上时，可以通过应用`transition`属性来平滑地改变元素的样式，比如改变阴影效果、颜色或者大小。这里提到的“浮动”效果可能是通过设置`position`属性（如`relative`或`absolute`）和...