Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
(Monetate)面包屑菜单使用HTML/CSS/jQuery-修复了<;a>;元素和CSS箭头的转换_Jquery_Html_Css - Fatal编程技术网

(Monetate)面包屑菜单使用HTML/CSS/jQuery-修复了<;a>;元素和CSS箭头的转换

(Monetate)面包屑菜单使用HTML/CSS/jQuery-修复了<;a>;元素和CSS箭头的转换,jquery,html,css,Jquery,Html,Css,我正在尝试使用由开发的非常棒的生成器生成的代码来编写面包屑类型的签出进度指示器。它使用HTML、CSS和jQuery的组合,并使用Monetate(异步加载)应用于我的站点。当用户处于签出的任何阶段时,都会突出显示该特定阶段。当用户将鼠标悬停在不是当前阶段的某个阶段上时,该阶段也会高亮显示,但颜色不同 到目前为止,一切顺利。除了一个问题,它工作得很好。 元素及其右侧的箭头应该在悬停时淡入0.15秒,然后在鼠标悬停时再次淡出。 转换在元素本身上的工作方式与您预期的相同,但在箭头上的工作方式不同。在

我正在尝试使用由开发的非常棒的生成器生成的代码来编写面包屑类型的签出进度指示器。它使用HTML、CSS和jQuery的组合,并使用Monetate(异步加载)应用于我的站点。当用户处于签出的任何阶段时,都会突出显示该特定阶段。当用户将鼠标悬停在不是当前阶段的某个阶段上时,该阶段也会高亮显示,但颜色不同

到目前为止,一切顺利。除了一个问题,它工作得很好。 元素及其右侧的箭头应该在悬停时淡入0.15秒,然后在鼠标悬停时再次淡出。 转换在元素本身上的工作方式与您预期的相同,但在箭头上的工作方式不同。在生成器中,它们都同时设置动画,但是当我在我的站点上运行它时,它看起来有点不对劲。当我在StackOverflow上运行它时,它也可以完全正常工作

有人知道这是什么原因吗

这里有一些HTML和CSS的代码片段,因为JS工作得很好,如果有什么奇怪或错误的地方,我真的很感激一些提示

/*主题选项-更改和所有更新*/
/*不要使用更多的小数,因为这会使浏览器更容易出现舍入错误,使高度不匹配
-另外,请注意在低字体大小时使用小数*/
.签出进度面包屑{
字体大小:1.5rem;
显示:内联块;
利润率:1%0;
字体系列:“开放式Sans”,无衬线;
文本对齐:居中;
背景色:白色;
线高:1;
}
/*基本项样式*/
.面包屑步骤{
显示:内联块;
填充物:0.5em 1em;
左:2米;
文字装饰:无;
过渡期:全部15秒;
/*默认样式*/
背景色:#e5ecdf;
颜色:rgba(0,0,0,0.8);
文本对齐:居中;
文本阴影:1px1pRGBA(0,0,0,0.2);
位置:相对位置;
右边距:0px;
}
/*箭头样式*/
.面包屑步骤:之前,
.面包屑步骤:之后{
内容:“;
身高:0;
宽度:0;
边框宽度:1米0 1米1米;
边框样式:实心;
过渡期:全部15秒;
位置:绝对位置;
左:100%;
排名:0;
}
/*与项目左侧重叠的箭头*/
.面包屑步骤:之前{
边框颜色:透明白色;
左:0;
}
/*从项目右侧指向的箭头*/
.面包屑步骤:之后{
边框颜色:透明#e5ecdf;
z指数:1;
}
/*当前项目样式*/
.step-selected.crump-step{
背景色:#8BA870;
颜色:白色;
游标:默认值;
}
.已选择步骤。碎屑步骤:之后{
边框颜色:透明#8BA870;
}
/*悬停样式*/
.crump步骤:未选择(.step selected):悬停{
背景色:#becfaf;
}
.crump步骤:未选择(.step selected):悬停:之后{
边框颜色:透明#becfaf;
}
/*从开始和结束处移除箭头*/
.crump step:类型的第一个:before,
.碎屑步骤:类型的最后一个:之后{
边框颜色:透明!重要;
}
/*第一项没有插入箭头*/
.碎屑步骤:第一种类型{
边界半径:0.25em 0.25em;
左侧填充:1.5em;
}
/*最后一项无突出箭头*/
.crump step:类型的最后一个{
边界半径:0.25em 0.25em 0;
右侧填充:1.5em;
}

原来问题是继承的转换,所以我想指出这一点,以防更多Monetate用户遇到这个问题。此特定页面上的链接继承了一组我没有发现的400ms转换:

.checkout_template a {
    text-decoration: none;
    transition: background-color 400ms ease-in-out,color 400ms ease-in-out; }
因此,为了覆盖这一点,我需要包括以下内容:

.checkout_template a {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: all 0 ease-in !important;
    transition: none !important; }

正如Monetate中的许多内容一样,“!important”是必要的,尽管不是最佳实践。

调试一些我们无法复制的内容非常困难。@我们的赞助人很公平,这很可能是Monetate特有的问题。不幸的是,我无法为Monetate创建新标签,因为我没有代表。一切看起来都很好,到底是什么问题?@TheDarkKnight感谢您的回复!这就是让我如此困惑的原因,真的。它在这里运行良好,在原始生成器中运行良好。但当我把它加载到我的网站上时,这两个文件就不同步了。我试图在两个方向上调整转换时间,以补偿这种奇怪的延迟,但没有效果。这让我相信这是一件赚钱的事情。我很想知道以前是否有人在使用Monetate或开发时遇到过这种情况。如果您已经部署了它,那么链接到它将非常棒