javascript - 箭头不出现需要CSS代码的帮助

标签 javascript html wordpress css flexslider

我是新来的,我需要你们的帮助很少。我一直在尝试解决这个问题,但没有找到任何办法,希望有人能帮助我。

这是我的网站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/

相关文章:

javascript - React - 复制粘贴导航栏示例的问题

javascript - Firebase - 在表单提交上存储图像。 react JS

html - 如何更改unicode字体颜色

html - 如何使用 Flex-box 进行响应式元素布局?

php - 在 Woocommerce 电子邮件中获取一些订单和订单项目数据

javascript - 使用lookarounds来查找匹配的javascript

javascript - 我如何获取单击元素的类名并将其放入使用 jquery 的函数中

Javascript - Jquery - 单击(函数()

javascript - 如何为 wordpress 创建插件

wordpress - 当我移动 WordPress 博客时,我必须更改什么(数据库/文件)才能在不更改 DNS 的情况下测试运行站点?