我是新来的,我需要你们的帮助很少。我一直在尝试解决这个问题,但没有找到任何办法,希望有人能帮助我。
这是我的网站http://www.newwebdemo.com/susan/
如果您向下滚动到出现推荐的“人们在说什么”部分。
您会注意到左箭头没有出现但右箭头出现正常,即使左侧箭头框也有箭头,但仍然没有出现,有人可以帮我找到问题出在哪里以及为什么没有出现。
这是代码部分
<ul class="flex-direction-nav">
<li>
<a class="flex-prev" href="#"></a>
</li>
<li>
<a class="flex-next" href="#"></a>
</li>
</ul>
这是它的css
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
flex-prev 没有显示箭头,但是 flex-next class 显示的箭头很好
两者都包含可以正常工作的 css 类,不确定还有什么原因导致这里....
最佳答案
做一件事转到 flexslider 的演示。右键单击然后单击查看页面源。之后进入演示的源并找到 flexslider.css。只需将 css 代码复制到您的 flexslider.css 代码中。然后谷歌查找 bg_direction_nav.png flexslider。
你会发现两个箭头图像。将它下载到你的系统中。然后转到 flexslider.css 并在第 51 行更改:
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute; top: 50%; cursor: pointer;
text-indent: -9999px;
opacity: 0;
-webkit-transition: all .3s ease;
}
更改背景:url(指向新保存的图片)
然后保存一切。刷新页面,你会得到箭头。
如果您的帖子有用,请登录 www.facebook.com/brightinfoway 并为该页面点赞。这是一个请求。谢谢
关于javascript - 箭头不出现需要CSS代码的帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23301673/