如何在Wordpress中添加额外的悬停效果？
如何在Wordpress中添加额外的悬停效果？
提问于 2022-07-12 14:14:42
我有一个按钮，我想要定制与我设置的全局按钮不同。我添加了按钮并修改了它，但是没有编辑按钮悬停颜色的选项，所以我尝试为它编写额外的CSS。
我为按钮设置了一个新的类。
Custom-Button-Orange-to-Purple但是，当我尝试向这个元素添加额外的样式时(我确实尝试设置了类，但没有使用“悬停”，这也不起作用)。
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}我试图修改的按钮是页面底部的橙色按钮：基兹黑文日托。代码将按钮的边框更改为紫色，这是我不想要的。
我是新添加自定义CSS (显然)，并将感谢一些帮助！
回答 2
Stack Overflow用户
发布于 2022-07-12 18:28:04
这就是CSS的样子，这是绝对错误的：
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}而且，类Custom-Button-Orange-to-Purple没有元素。
这就是我从你的问题中了解到的:你已经定制了通常按钮的样式，现在你想要设计一个看起来不同的按钮。如果是这样的话，这可能有助于：
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
Stack Overflow用户
发布于 2022-07-13 12:41:41
这花了整整几天的时间狩猎和尝试不同的方法。我所做的就是去掉我添加到"Advanced“选项卡中的类名，在这个选项卡中我创建了自定义按钮。相反，我将HTML添加到页面中按钮将出现的块中。我还使用了div容器来在页面上对其进行居中。
添加到具有新类名的块中的HTML：
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">为什么孩子们有托儿所
额外的CSS：
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}我不确定我是否“需要”使用！重要，但考虑到它需要的时间来解决这一点，我认为这是安全比对不起！
谢谢你的回复。我是个新手，所以我的一些评论
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72953796
复制相关文章
相似问题
腾讯云开发者
