CSS-网页上的动画按钮没有运行所有动画(通过Javascript添加到页面中的按钮)
CSS-网页上的动画按钮没有运行所有动画(通过Javascript添加到页面中的按钮)
提问于 2018-03-14 22:48:08
我正在做这个网页的视觉升级项目，我有问题，让我的动画按钮，嗯，完全动画。当鼠标悬停时，它们将改变颜色，但它们还应该包括按钮文本的轻微移动和按钮内文本旁边的图标的外观。
我在一个独立的HTML文档上测试了这个概念，因为在我们的测试服务器上重复测试仍然需要在每次构建负载之间花费一段时间(这是另一个令人头疼的问题，谢天谢地在我的部门之外！)
作为独立HTML页面的工作概念如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
.leftEnd {
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 0px solid #780a29;
border-bottom: 63px solid #780a29;
border-top: 0px solid transparent;
float: left;
}
/*Button 2 was intended to be for a dropdown. Not using currently, but may in future*/
.button, .button2 {
display: inline-block;
background-color: #780a29;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 0px;
float: left;
}
.button, .button2, span {
cursor: pointer;
display: inline-block;
position: relative;
right: 0px;
transition: 0.5s;
}
.button span:after {
content: ' \00bb';
position: absolute;
opacity: 0;
top: 0;
right: 0px;
transition: 0.5s;
}
.button2 span:after {
content: '\25BC';
position: absolute;
opacity: 0;
top: 0;
right: 0px;
transition: 0.5s;
margin-right: -0.25em;
font-size: .75em;
padding-top: .2em;
}
.button:hover, .button2:hover {
background-color: #490619;
}
.button:hover span {
padding-right: 25px;
}
.button2:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button2:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<span class="leftEnd"></span>
<button class="button"><span>Type 1</span></button>
<button class="button"><span>Type 1</span></button>
<button class="button"><span>Type 1</span></button>
</body>
</html>
但是，对于我的项目，我不能接触HTML源代码，所以我不得不稍微修改CSS，并使用Javascript将它添加到页面中。CSS如下所示：
/*
Toolbar site-navigation links
Future: Condense/simplify this section
*/
.toolbar-btn-grp .leftEndCap {
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 0px solid #780a29;
border-bottom: 63px solid #780a29;
border-top: 0px solid transparent;
float: left;
cursor: default;
}
/*tbButton 2 was intended to be for a dropdown. Not using currently, but may in future*/
.toolbar-btn-grp .tbButton, .toolbar-btn-grp .tbButton2 {
display: inline-block;
background-color: #780a29;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 0px;
float: left;
}
.toolbar-btn-grp .tbButton, .toolbar-btn-grp .tbButton2, span {
cursor: pointer;
display: inline-block;
position: relative;
right: 0px;
transition: 0.5s;
}
.toolbar-btn-grp .tbButton span:after {
content: ' \00bb';
position: relative;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.toolbar-btn-grp .tbButton2 span:after {
content: '\25BC';
position: relative;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
margin-right: -0.25em;
font-size: .75em;
padding-top: .2em;
}
.toolbar-btn-grp .tbButton:hover, .toolbar-btn-grp .tbButton2:hover {
background-color: #490619;
}
.toolbar-btn-grp .tbButton:hover span {
padding-right: 25px;
}
.toolbar-btn-grp .tbButton2:hover span {
padding-right: 25px;
}
.toolbar-btn-grp .tbButton:hover span:after {
opacity: 1;
right: 0;
}
.toolbar-btn-grp .tbButton2:hover span:after {
opacity: 1;
right: 0;
}
.toolbar-btn-grp {
margin-left: 25%;
}我用来把这个放在页面上的javascript如下所示：
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<span class="leftEndCap"></span>');
$('#productToolbar').append('<button onclick="goHome()" class="tbButton">Main Site</button>');
$('#productToolbar').append('<button onclick="contact()" class="tbButton">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-grp');
}
);
function goHome() {
window.location.href = 'https://www.main-site.org/';
}
function contact() {
window.location.href = 'https://www.main-site.org/contact/';
}
</script>事实上，span在CSS中所遵循的特性并没有在我们的站点上运行，这让我相信这是问题的关键。我知道span在子div级别工作，所以我想知道当toolbar-btn-grp类通过JS添加时，当它解析CSS类时，span元素会因为某种原因而被忽略。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-14 23:03:54
您可以这样简化您的CSS：
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="tbButton">Main Site</button>');
$('#productToolbar').append('<button onclick="contact()" class="tbButton">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-grp leftEndCap');
});
function goHome() {
window.location.href = 'https://www.main-site.org/';
}
function contact() {
window.location.href = 'https://www.main-site.org/contact/';
}/*
Toolbar site-navigation links
Future: Condense/simplify this section
*/
.leftEndCap {
position:relative;
}
.leftEndCap:before {
content:"";
position:absolute;
left:-25px;
top:0;
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 0px solid #780a29;
border-bottom: 63px solid #780a29;
border-top: 0px solid transparent;
}
/*tbButton 2 was intended to be for a dropdown. Not using currently, but may in future*/
.toolbar-btn-grp .tbButton,
.toolbar-btn-grp .tbButton2 {
display: inline-block;
background-color: #780a29;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 0px;
float: left;
}
.toolbar-btn-grp .tbButton,
.toolbar-btn-grp .tbButton2 {
cursor: pointer;
position: relative;
right: 0px;
transition: 0.5s;
}
.toolbar-btn-grp .tbButton:after {
content: ' \00bb';
position: relative;
opacity: 0;
top: 0;
right: 10px;
transition: 0.5s;
}
.toolbar-btn-grp .tbButton2:after {
content: '\25BC';
position: relative;
opacity: 0;
top: 0;
right: 20px;
transition: 0.5s;
margin-right: -0.25em;
font-size: .75em;
padding-top: .2em;
}
.toolbar-btn-grp .tbButton:hover,
.toolbar-btn-grp .tbButton2:hover {
background-color: #490619;
}
.toolbar-btn-grp .tbButton:hover {
padding-left: 5px
}
.toolbar-btn-grp .tbButton:hover:after,
.toolbar-btn-grp .tbButton2:hover:after{
opacity: 1;
right: -20px
}
.toolbar-btn-grp {
margin-left: 25%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar" ></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49288846
复制相关文章
相似问题
腾讯云开发者
