html - 将鼠标悬停在类上时更改 li 类的 CSS
问题描述
我想更改一个 li 类的 CSS,同时将鼠标悬停在一个类上。
我的网站是 hoomi.nl。具体页面是:https ://hoomi.nl/producten/ 。
当有人将鼠标悬停在 productimage/productbox 上方时,应该会弹出“meer informatie”按钮。现在该按钮仅在您将鼠标悬停在产品框的中心时才会出现。我怎么能那样做?
我已经创建了自定义 css 来向上移动按钮并更改颜色以使其在您不悬停在其上时使其不可见,并且当您将其悬停在其上时,背景和文本会变为颜色,因此您可以看到它。
li.product .button{
font-weight: 300;
font-size: 13px;
color: #fff0;
border-radius: 5px;
background: #fff0;
left: 50%;
line-height: 1em;
margin: 0;
margin-left: -6em;
margin-top: -2.5em;
position: absolute;
top: 50%;
transition: opacity .4s cubic-bezier(.5,.25,0,1);
width: 12em;
}
li.product .button:hover {
background-color: #fff;
color: #333;
}
解决方案
您是否尝试过使用:hover
CSS <li>
,如下所示:
li.product:hover .button {
background-color: #fff;
color: #333;
}
推荐阅读
- c++ - 指向明确创建的对象的智能指针
- poco-libraries - Poco Thread 如何避免使用 Join
- ruby-on-rails - 使用 Ruby on Rails 提交后出现路由错误
- css - Safari 开发者工具在调试 Ipad 时不显示自定义 CSS
- websphere - 自动化脚本中未定义隐式变量
- reactjs - 弹出框中的按钮“更多”不适用于 React hook useState
- client-server - Apache Geode - 在基于 DUnit 的测试服务器/远程服务器上使用来自客户端的相同代码创建区域
- php - wp_remote_post 不发送帖子数据
- xamarin - e.CenterItemIndex 变为 0,每次组发生变化(OS)
- html - Scrapy和不完整的数据,我如何正确存储所有内容?