美文网首页程序员WEB前端程序开发
使用纯CSS实现移动菜单更改内容区功能

使用纯CSS实现移动菜单更改内容区功能

作者: 常青的秘密 | 来源:发表于2017-03-29 17:31 被阅读93次

首先先放一张效果图

效果图

HTML主题

<div>
    <div class="a">菜单1</div>
    <div class="a">菜单2</div>
    <div class="b">内容1</div>
    <div class="b">内容2</div>
</div>

css部分

/*主体样式 */
.a
{
    float: left;
    width: 100px;
    height: 40px;
    margin: 2px;
    background-color: #29b6f6;
}
.b
{
    clear: both;
    width: 204px;
    height: 200px;
    margin: 2px;
    background-color: #8bc34a;
}
.b:nth-child(4)
{
    display: none;
    background-color: #ffeb3b;
}
/*内容切换*/
.a:nth-child(1):hover ~ .b:nth-child(3)
{
    display: block;
}
.a:nth-child(1):hover ~ .b:nth-child(4)
{
    display: none;
}
.a:nth-child(2):hover ~ .b:nth-child(3)
{
    display: none;
}
.a:nth-child(2):hover ~ .b:nth-child(4)
{
    display: block;
}
选择器 例子 例子描述 CSS
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:hover a:hover 选择鼠标指针位于其上的链接。 1
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
  • 首先,我们通过:nth-child(n)伪类定位到相应的元素(菜单)上;
  • 然后,使用:hover选择器获取在鼠标移至菜单时的菜单元素,
  • 接着使用~选择器获取在鼠标移至菜单时的菜单元素后跟着的内容元素。
  • 这样我们就可以通过改变display属性来改变内容区的内容了。

这种方法只能在鼠标移至菜单项时改变内容区的内容和样式,在鼠标移开时,内容区恢复默认。

相关文章

  • 使用纯CSS实现移动菜单更改内容区功能

    首先先放一张效果图 HTML主题 css部分 选择器例子例子描述CSS:nth-child(n)p:nth-chi...

  • 纯css实现的三级水平导航菜单

    纯css实现的三级水平导航菜单 vscode练习使用开发纯css的三级水平导航菜单。先上图: 1、html5布局 ...

  • css学习 第五天

    CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 基本下拉菜单 当鼠标移动到指定元素上时...

  • 网页二,三级菜单制作

    网页二级菜单制作的方式可以采用两种方式来实现,第一种使用纯CSS控制,第二种使用JavaScript+CSS。下面...

  • HTML : 表单实现

    作业内容 使用纯html实现考试页面(不使用任何css/js),使用正确合适的标签做出如下的页面效果。内容需要完全...

  • web前端特效演示合集

    前端特效01:使用纯CSS实现书籍3D翻页效果 前端特效02:使用纯CSS实现动态太极 前端特效03:HTML5画...

  • HTML练习——实现一份试卷

    练习: 使用纯html实现考试页面(不使用任何css/js),使用正确合适的标签做出如下的页面效果。内容需要完全一...

  • 移动端rem单位计算

    参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法

  • 跟着斯坦福白胡子老头学Alert

    iOS使用UIAlertController类实现基本的对话框、单选菜单功能,可以显示标题、内容、选项、按钮、输入...

  • CSS多级菜单

    这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单。实现原理基本和纯CSS相册差不多,但要注意...

网友评论

    本文标题: 使用纯CSS实现移动菜单更改内容区功能

    本文链接:https://www.haomeiwen.com/subject/brkyottx.html