登录
当前位置： 首页 > 知识库问答 >
问题：

悬停时改变颜色

梁丘诚
2023-03-14

只是尝试在CSS中练习悬停和下拉。在下面的代码中，我希望每当下拉子div.li（带有Home1文本的绿色div)悬停在上面时，ul的背景色（红色）应该更改为蓝色。

会很感激你的帮助。

null

html, body {
  margin: 0px;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(0,0,0,1);
  padding: 0px;
}

* {
  box-sizing: border-box;
}

a {
  color: rgba(0,0,0,1);
  text-decoration: none;
  /* [disabled]background-color: rgba(255,0,0,1); */
  display: block;
}

li {
  display: block;
  width: 100px;
  background-color: rgba(0,255,0,1);
  border: thin solid rgba(0,0,0,1);
  position: relative;
  margin-right: auto;
  margin-left: auto;
  /* [disabled]left: 0px; */
  /* [disabled]top: 0px; */
  margin-top: 5px;
  /* [disabled]float: left; */
  list-style-type: none;
}

a:hover {
  color: rgba(255,0,0,1);
}

.wrapper {
  height: 600px;
  max-width: 960px;
  margin-left: auto;
  left: 0px;
  top: 0px;
  background-color: rgba(204,204,204,1);
  margin-right: auto;
  position: relative;
  padding: 0px;
  margin-top: 0px;
}

.content {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  max-height: 200px;
  max-width: 600px;
  background-color: #FFF;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  left: 0px;
  right: 0px;
  font-size: 32px;
  text-align: center;
  border: 3px solid rgba(0,0,0,1);
  border-radius: 15px 15px 0px 0px;
  width: 100%;
}

.content-small {
  max-width: 100px;
  height: 100%;
  max-height: 50px;
  background-color: rgba(0,255,204,1);
  position: relative;
  margin-right: auto;
  margin-left: auto;
  border: 3px solid rgba(0,0,0,1);
  top: 5px;
  margin-top:10px;
}

.content-small:hover + .dropdown {
  visibility: visible;    
}

.dropdown:hover {
  visibility: visible;
}

ul {
  position: relative;
  background-color: rgba(255,0,0,1);
  max-width: 500px;
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  padding: 0;
  margin-top: 0px;
}

.dropdown {
  max-width: 500px;
  /* [disabled]max-height: 100px; */
  position: relative;
  margin-right: auto;
  margin-left: auto;
  top: 0px;
  margin-top: 5px;
  visibility: hidden;
  list-style-type: none;
  text-align: center;
  background-color: rgba(153,153,153,1);
}
<div class="wrapper">
  <div class="content">
    <div class="content-small">
      Home
    </div>
    <div class="dropdown">
      <ul>
        <li><a href="">Home1</a></li>
        <li><a href="">Home2</a></li>
      </ul>
    </div>
  </div>
</div>

null

共有2个答案

方宏富
2023-03-14

如果您坚持只使用CSS的解决方案，您可以考虑巧妙地设计和定位:pseudo元素。

CSS

.dropdown li {
    width: 100%;
    background: transparent;
    border: 0px;
    position: relative;
    z-index: 9;
}

.dropdown li a {
    max-width: 100px;
    display: block;
    margin: auto;
    background-color: rgba(0,255,0,1);
    border: thin solid rgba(0,0,0,1);
    z-index: 9;
    position: relative;
}

.dropdown li:hover {
    background: blue;
    z-index: 8;
}

.dropdown li:hover:before {
    position: absolute;
    content: "";
    background: blue;
    top: -100px;
    bottom: -100px;
    left: 0;
    width: 100%;
}

.dropdown ul {
    overflow: hidden;
}

null

/* Start Added Styles */

.dropdown li {
    width: 100%;
    background: transparent;
    border: 0px;
    position: relative;
    z-index: 9;
}

.dropdown li a {
    max-width: 100px;
    display: block;
    margin: auto;
    background-color: rgba(0,255,0,1);
    border: thin solid rgba(0,0,0,1);
    z-index: 9;
    position: relative;
}

.dropdown li:hover {
    background: blue;
    z-index: 8;
}

.dropdown li:hover:before {
    position: absolute;
    content: "";
    background: blue;
    top: -100px;
    bottom: -100px;
    left: 0;
    width: 100%;
}

.dropdown ul {
    overflow: hidden;
}

/* End Added Styles */

html,body {
    margin: 0px;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,1);
    padding: 0px;
    }


*{
    box-sizing:border-box;
}

a {
	color: rgba(0,0,0,1);
	text-decoration: none;
	/* [disabled]background-color: rgba(255,0,0,1); */
	display: block;
}

li {
	display: block;
	width: 100px;
	background-color: rgba(0,255,0,1);
	border: thin solid rgba(0,0,0,1);
	position: relative;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]left: 0px; */
	/* [disabled]top: 0px; */
	margin-top: 5px;
	/* [disabled]float: left; */
	list-style-type: none;
}

a:hover {
	color: rgba(255,0,0,1);
}




.wrapper {
    height: 600px;
    max-width: 960px;
    margin-left: auto;
    left: 0px;
    top: 0px;
    background-color: rgba(204,204,204,1);
    margin-right: auto;
    position: relative;
    padding: 0px;
    margin-top: 0px;
}


.content {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    max-height: 200px;
    max-width: 600px;
    background-color: #FFF;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    left: 0px;
    right: 0px;
    font-size: 32px;
    text-align: center;
    border: 3px solid rgba(0,0,0,1);
    border-radius: 15px 15px 0px 0px;
    width: 100%;
}

.content-small {
    max-width: 100px;
    height: 100%;
    max-height: 50px;
    background-color: rgba(0,255,204,1);
    position: relative;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid rgba(0,0,0,1);
    top: 5px;
  margin-top:10px;
}

.content-small:hover + .dropdown{
    visibility: visible;    
}

.dropdown:hover{
	visibility: visible;
}

ul {
	position: relative;
	background-color: rgba(255,0,0,1);
	max-width: 500px;
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	padding: 0;
	margin-top: 0px;
}

.dropdown {
	max-width: 500px;
	/* [disabled]max-height: 100px; */
	position: relative;
	margin-right: auto;
	margin-left: auto;
	top: 0px;
	margin-top: 5px;
	visibility: hidden;
	list-style-type: none;
	text-align: center;
	background-color: rgba(153,153,153,1);
}
<div class="wrapper">
	<div class="content">
	  <div class="content-small">
		Home
        </div>
	<div class="dropdown">
      <ul>
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
		</ul>
      </div>
     
</div>

</div>
郭博涉
2023-03-14

我认为Javascript是这里的简单解决方案。

如果要设置父元素的颜色，CSS没有可用的当前选择器。

null

$('.dropdown li').mouseenter(function(){
  $(this).parent().css('background-color', 'blue');
});

$('.dropdown li').mouseleave(function(){
  $(this).parent().css('background-color', 'red');
});
css lang-css prettyprint-override">html,body {
    margin: 0px;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,1);
    padding: 0px;
    }


*{
    box-sizing:border-box;
}

a {
	color: rgba(0,0,0,1);
	text-decoration: none;
	/* [disabled]background-color: rgba(255,0,0,1); */
	display: block;
}

li {
	display: block;
	width: 100px;
	background-color: rgba(0,255,0,1);
	border: thin solid rgba(0,0,0,1);
	position: relative;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]left: 0px; */
	/* [disabled]top: 0px; */
	margin-top: 5px;
	/* [disabled]float: left; */
	list-style-type: none;
}

a:hover {
	color: rgba(255,0,0,1);
}




.wrapper {
    height: 600px;
    max-width: 960px;
    margin-left: auto;
    left: 0px;
    top: 0px;
    background-color: rgba(204,204,204,1);
    margin-right: auto;
    position: relative;
    padding: 0px;
    margin-top: 0px;
}


.content {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    max-height: 200px;
    max-width: 600px;
    background-color: #FFF;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    left: 0px;
    right: 0px;
    font-size: 32px;
    text-align: center;
    border: 3px solid rgba(0,0,0,1);
    border-radius: 15px 15px 0px 0px;
    width: 100%;
}

.content-small {
    max-width: 100px;
    height: 100%;
    max-height: 50px;
    background-color: rgba(0,255,204,1);
    position: relative;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid rgba(0,0,0,1);
    top: 5px;
  margin-top:10px;
}

.content-small:hover + .dropdown{
    visibility: visible;    
}

.dropdown:hover{
	visibility: visible;
}

ul {
	position: relative;
	background-color: rgba(255,0,0,1);
	max-width: 500px;
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	padding: 0;
	margin-top: 0px;
}

.dropdown {
	max-width: 500px;
	/* [disabled]max-height: 100px; */
	position: relative;
	margin-right: auto;
	margin-left: auto;
	top: 0px;
	margin-top: 5px;
	visibility: hidden;
	list-style-type: none;
	text-align: center;
	background-color: rgba(153,153,153,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="content">
	  <div class="content-small">
		Home
        </div>
	<div class="dropdown">
      <ul>
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
		</ul>
      </div>
     
</div>

</div>
 类似资料：
  • 如何在悬停时改变svg颜色

    每一个，我都在使用angular并且我有一个svg，html，比如： 这是svg源代码filter_default： 我想知道当鼠标悬停时如何改变svg的颜色，谢谢大家的帮助！

  • 鼠标悬停在SVG改变颜色[重复]

    我在HTML中添加了SVG。我想做的是，当鼠标悬停在SVG上时，将其更改为淡黄色，转换为1s。 HTML中的CSS是： 超文本标记语言的内容： 猛禽。svg内容如下： 或者，我尝试使用CSS在鼠标移动期间改变颜色： 它也不能工作，因为CSS属性不能更改SVG填充颜色。 我错过了什么？我必须使用内联SVG吗？

  • CSS引导按钮修改。悬停时颜色只变一半

    我不知道我的CSS有什么问题。我试图通过修改默认引导颜色来创建一个名为“btn-success2”的新类，该类具有新的颜色。我试图将悬停颜色设置为白色，但它只改变了一半。顶部仍然是相同的绿色。 我的代码如下： jsfiddle：https://jsfiddle.net/ms4uk83e/

  • 如何改变字体超赞图标悬停颜色？

    目前我的html如下所示： 我尝试执行以下CSS，但没有任何结果：

  • 如何使用鼠标悬停使圆改变颜色

    我想设置一个圆圈网格（非重叠），以便当鼠标指针位于其中一个圆圈上时，该圆圈会改变颜色。我已经尝试过，到目前为止有两种选择： > 使用容器，例如JPanel。使用MouseMotionListener.mouseMoved（MouseEvent e）始终获取鼠标指针的x和y坐标。然后，如果坐标位于其中一个圆圈内，请使用repaint（）重新绘制整个容器。 将每个圆设置为一个容器。使用mouse li

  • 如何在悬停时更改按钮的颜色？

    问题内容： 我需要更改悬停按钮的颜色。 这是我的解决方案，但是不起作用。 问题答案： 表示“正在悬停的链接是该类链接的子链接”。 代替。

相关问答

如何使用鼠标悬停使圆改变颜色悬停时更改图像颜色而不必更改图像CSS按钮在悬停期间不改变颜色（css和html）在悬停/单击时更改图像（颜色）和链接Twitter引导导航栏按钮悬停时颜色发生变化

相关文章

悬停时是否可以仅更改rgba背景颜色的Alpha？在孩子悬停时，更改父容器的背景颜色（仅CSS）悬停更改图像CSS：图像链接，悬停时更改如何在悬停时更改内容

相关阅读

Bootstrap4 颜色Bootstrap5 颜色HTML 颜色JavaFX颜色物联网如何改变商业？

相关工具

颜色放置主题颜色切换单一label多颜色多字体16进制颜色与UIColor互转变色方块

相关文档

变现猫接入文档 v1.4Effective C# 改善 C# 程序的 50 种方法略知 知识付费与内容变现 帮助文档2 小时精通金数据及策实时分析平台帮助文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.