我有一个导航面板,当您将鼠标悬停在灯具

上时,它会显示从主导航面板下拉的面板中的前5个灯具。CSS:我如何将鼠标悬停在一个元素上,并显示另一个元素?

我试图实现这个使用CSS与:hover。 这是:hover IM的例子试图让:http://jsfiddle.net/EajKf/189/

HTML:

  • Home
  • Fixtures
  • Manchester City

CSS:

#nav li a.fixtures:hover{

color: #000;

margin-top:1px;

-webkit-transition-duration: 0.4s;

cursor: pointer;

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

box-shadow: 0px 0px 20px rgba(0,235,255,0.8);

-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);

background: rgba(255,102,51,0.8);

opacity: 50%;

}

#nav li a.hidden{

margin-top: 50px;

padding: 100px;

background-color: #fff;

display: none;

}

#nav li a.fixtures:hover #nav li a.hidden{

display: block;

}

感谢您的答案!

2013-06-26

sam

+0

它可能会更好,如果你使用JavaScript。这会很容易。我认为CSS没有这种选择。 –

+0

请勿使用相同的ID。您能否在您的示例代码中添加子菜单的html? –

+0

你应该使用toggle/toggleclass –

html鼠标悬停出现新元素,CSS:我如何将鼠标悬停在一个元素上,并显示另一个元素?...相关推荐

  1. php 元素添加子元素,css,html_怎么在添加的子元素上继承父元素上已存在的子元素的属性?,css,html,javascript - phpStudy...

    怎么在添加的子元素上继承父元素上已存在的子元素的属性? 请问如何使添加后的子元素(tr)也能在鼠标经过前后继续保留其存在的子元素上的属性? dom的基础应用 window.οnlοad=functio ...

  2. vue 悬停显示另一个div_CSS或者JS实现鼠标悬停显示另一元素

    想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现. js: 写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mo ...

  3. html鼠标事件有哪些,JavaScript事件类型:鼠标事件

    Dom3级事件中定义了9个鼠标事件 1.click事件 click:用户单击鼠标主按钮(一般为左边按钮)或者在获得焦点的前提下按回车键时触发. click()方法也可以触发click 事件. 2.db ...

  4. CSS设置了正确的背景图片位置,网页上却显示不出来?

    关于CSS中设置背景图片但在网页上未显示做如下笔记,和大家分享.. 如有说的不对或不恰当的地方,希望读者指出,共同进步. 今天在写一个小项目的时候在一个点上疑惑了许久,明明我的背景图片路径设置的不会错 ...

  5. html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式

    不能使用外部CSS样式实现hover鼠标悬停改变样式 在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...

  6. html桌面卡牌效果,html+css实现响应式卡片悬停效果

    话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...

  7. css 菜单栏悬停_在CSS中构建悬停菜单

    css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...

  8. html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)...

    本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...

  9. JS+CSS控制左右切换鼠标可控的无缝图片滚动代码

    代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...

最新文章

  1. duilib combo增加搜索栏_微信对话框上线搜一搜,搜索一步到位!
  2. 高通固件解包IPQ6000固件解包
  3. log file sync(日志文件同步) 与 Log file parallel write 等待事件
  4. swal弹窗_swal() 弹出层的用法
  5. 出现Too many connections错误,怎样解决?
  6. Install stardict on Ubuntu
  7. 全志r11_全志R328 Demo开发板;全志R333开发板/核心板;全志R11开发板/核心板;全志R16开发板/方案设计...
  8. 达梦数据库查询数据库所有表名_达梦数据库的一些实用小SQL
  9. [轉]Android Libraries 介紹 - Butter knife
  10. python使用协程_Python使用协程进行爬虫
  11. opencv+Dlib python瘦脸代码
  12. java泛型要用t,Java泛型中T和問號(通配符)的區別
  13. 机器学习常用十大算法
  14. editplus软件下载地址
  15. CISP证书有什么作用?考试难度大吗?
  16. CDLinux破解WEP、WPA加密过程
  17. 【Unity】LineRenderer画运动轨迹
  18. Python实现 — —水仙花数(一问多解)
  19. linux 查看磁盘信息
  20. CNN在自然语言处理上的详细解析与应用

热门文章

  1. R字符串(Strings)转为日期类型(Dates)
  2. 通过交叉验证(Cross Validation)KFold绘制ROC曲线并选出最优模型进行模型评估、测试、包含分类指标、校准曲线、混淆矩阵等
  3. ExpressionSet类使用
  4. 小米快传文件服务器怎么用,手机中的小米快传怎么用?小米快传的详细使用教程...
  5. Single Molecule Real-Time Sequencing
  6. DDR: efficient computational method to predict drug–target interactions using graph mining and machi
  7. Toward perfect reads: self-correction of short reads via mapping on de Bruijn graphs
  8. mysql源码学习 vc项目解决方案文件_Mysql源码学习——源码目录结构
  9. tensorflow keras 上采样(放大图片) tf.keras.layers.UpSampling2D 示例
  10. 语义分割--Fully Convolutional DenseNets for Semantic Segmentation