css实现菜单栏效果以及用hover属性去控制另一个元素样式的问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动</title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .one{
                text-decoration: none;
                color:red;
                font-size: 20px;         /*position: relative;*/
            }
            .two{
                width: 200px;
                height: 100px;
                background: blue;
                display: none;         /*position: absolute;*/         
            }
            .one:hover + .two{
                display: block;
            }

    </style>
</head>
<body>
        <div class="one">            你好            <div class="two">我一点也不好</div>            </div>                    <div style="width: 100px; height: 100px; background-color: yellow">我是下面的元素</div>
</body>
</html

实现鼠标经过   你好   显示    我一点也不好  的效果方法:

首先使用display:none 隐藏要显示的菜单栏元素,当鼠标经过一个元素时将它的display改成block。

鼠标经过one元素时怎么选择two元素的问题:

1.当两个p元素为包含关系时,选择器应该这样写.one:hover .two

     <p class="one">        你好
          <p class="two">我一点也不好</p>      </p>

2.当两个p元素为并列关系时,选择器应该这样写.one:hover  + .two

    <p class="one">你好</p>
        <p class="two">我一点也不好</p> 

经过验证,1的写法不能显示效果,因为浏览器默认把one的开始标签和two的结束标签 认为是一个...嗯...整体标签。此时改变其中一个p标签为div,或者两个p标签都改成div就有效果。为什么div可以,p就不行?

好像块状元素可包含内联元素或某些块元素,但内联元素不可包含块元素,只能包含内联元素。

     <p class="one">
        你好
          <p class="two">我一点也不好</p>
     </p>

这个时候在下面再加入一个元素

<body>
        <p class="one">
            你好
        </p>
        <p class="two">我一点也不好</p>
        <div style="width: 100px; height: 100px; background-color: yellow">我是下面的元素</div>
</body>

鼠标未移到one时效果:

鼠标移上去之后效果,下面的元素会被顶开:

解决办法:因为.two 显示时是存在于文档流中的,给.one设置position:relative,.two设置position:absolute,使下拉菜单脱离了文档流来解决。

加了position:absolute 已经实现效果 为什么还要给.one设置position:relative????十二点了,我不想再想了!明天再说!

原文地址:https://www.cnblogs.com/huihuifighting/p/10743440.html

时间: 2024-10-01 11:51:38

css实现菜单栏效果以及用hover属性去控制另一个元素样式的问题的相关文章

CSS学习笔记2-2d变换和过渡属性

前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale||skew 平移.旋转.缩放.斜切 1. 平移 transform:translate() 参数说明: 只有一个值的情况下,表示水平方向运动,正值向右,负值向左,也可以接受百分比,百分比参照的是自身的宽,高 两个值分别控制水平和垂直 移动不会影响其他的元素,类似于相对定位 我们可以通过盒子的绝对定

React 系列教程 1:实现 Animate.css 官网效果

前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作.这对于学习 React 来说是一个非常简易的例子,但是我并不会在教程中介绍相关的前置知识,比如 JSX.ES6 等,对于小白来说可能还会有一些困惑的地方,所以还要了解一下 React 相关的基础知识.虽然 React 有很多值得深究的知识,但这个系列教程并不会涉及高大深的内容

css 实现评分效果

css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上稍有偏差. 我的理解:有人认为background-position  的位置移动中,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置, 可参见:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

CSS 属性 - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: css3 为了区分两者,明确规定伪类用一个冒号来表示,伪元素则用两个冒号来表示 :Pseudo-classes ::Pseudo-elements ②功能不一样: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果

详解 CSS 属性 - 伪类和伪元素的区别

CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生选择器等等这些从HTML文档层次结构(DOM树)中获取元素不同的是,伪类和伪元素是预定义的.独立于文档元素的.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).当然,伪类和伪元素的表示形式也使用“:”(英文冒号)

CSS和SVG中的剪切——clip-path属性和&lt;clipPath&gt;元素

剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内的内容将会显示,而不在这个区域内的内容不会显示.这个区域被称之为“裁剪区域”.只要在这个区域之外的任何元素都不会显示.包括元素的内容.背景.边框.文本.轮廓等,甚至还包括他的子元素. 剪切的元素可以是任何容器和图片元素. 剪切路径的概念就相当于在元素上定义了一个视窗.它决定了元素哪些部分在这个“视窗

利用target的特性,可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

CSS入门之引用、选择器、属性(六分之三)

CSS 入门教程六分之三篇 没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了...所以先写到六分之三,23333333 要点 解释 引用 如何使用定义的CSS样式方式 选择器 指明被定义样式的标签 属性 样式定义时具体定义的内容 定位 如何将标签放置到具体的位置(下篇) 盒模型 面试经典题(下篇) 显示 如何显示标签与标签布局(下篇) 引用 内联 开标签或自闭合标签的style属性上写明对应的CSS定义内容,即为内联方式引用,如下: <div style=

Css3之高级-7 Css动画(概述、关键帧、动画属性)

一.动画概述 动画概念 - 过渡属性只能模拟动画效果 - animation 属性可以制作类似 Flash 动画 - 通过关键帧控制动画的每一步 - 使元素从一种样式逐渐变化为另一种样式 - 实现复杂的动画效果 - 浏览器兼容性 - 最新版本支持良好 - Chrome 和 Safari 需要前缀 -webkit- - FireFox 需要前缀 -moz- - Opera 需要前缀 -o- 动画示例 - 声明动画 - 创建一个已命名的动画 - 使用 @keyframes 声明动画的关键帧 - 为元