购物车图标无法点击

时间：2017-04-24 13:43:21

标签： css wordpress woocommerce nav

我正在使用this文章中的代码在我的Wordpress网站上为我的woocommerce插件添加购物车。尝试在我的主题中实现时，我遇到了这个代码的两个问题：

  1. 即使链接正确，也无法点击购物车图标 当下。有一些css代码 导致此问题的header[role='banner']:before，但我 一直无法解决..
  2. 其次，cart-contents-count应该放在同一行的购物车旁边，如图所示，而不是现在的情况。

    3. 最终结果应与此类似：

    enter image description here

    我已经复制并隔离了下面的代码：

    ＆＃13;
    ＆＃13; 
    article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

header[role='banner'] {
  height: 100px;
  background-color: yellow;
  top: 0px;
  width: 100%;
  z-index: 10000;
  border-bottom: 1px solid #ccc !important;
}


/* SOME THING HER CAUSES THE CART TO BECOME UNCLICKABLE*/

header[role='banner']:before {
  display: block;
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.02);
  z-index: 0;
}

#main-nav-wrapper {
  display: block !important;
  margin-top: 10px;
}

.nav {
  float: right;
  clear: none;
  border: 0;
  margin: 0px;
  z-index: 100;
  display: block;
  list-style: none;
  margin-top: 30px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.nav li {
  float: left;
  position: relative;
}

.nav li a {
  padding: 0px 20px !important;
  display: block;
  text-decoration: none;
}

.nav li a:after {
  content: '';
  width: 1px;
  height: 15px;
  background-color: #e8e8e8;
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -7px;
}


/* CART */

.cart-contents:before {
  font-family: 'FontAwesome';
  font-size: 28px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  padding-right: 5px;
  vertical-align: bottom;
}

.cart-contents:hover {
  text-decoration: none;
}

.cart-contents-count {
  color: #fff;
  background-color: #2ecc71;
  font-weight: bold;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: baseline;
}

.cart-placement {
  float: right;
  display: inline-block !important;
  line-height: 100px;
  padding: 0;
  z-index: 20000;
}

.cart-placement {
  float: right;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  display: inline-block;
  line-height: 50px;
  padding: 0;
position:relative;
}

a.cart-contents {
  color: #ff7454 !important;
}
    ＆＃13; 
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<header class="header" role="banner">
  <nav role="navigation">

    <div class="cart-placement">

      <a class="cart-contents" href="http://www.bbc.uk.co" title="add to cart"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>


                      <div class="cart-contents-count">1</div>
                  </a>


    </div>


    <div id="main-nav-wrapper">
      <ul class="nav main-nav clearfix">
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Home</a></li>

        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">About</a></li>

        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Contact</a></li>

      </ul>
    </div>
  </nav>
</header>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    JSFIDDLE处的相同代码。

3 个答案:

答案 0 :(得分：2)

请添加职位：亲属;在.cart-placement这个类

.cart-placement {
  float: right;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  display: inline-block;
  line-height: 50px;
  padding: 0;
  position:relative;
}

答案 1 :(得分：2)

正如我评论的那样：

  • 第一个问题已修复：position:relative;预先提供元素。如果另一个已定位元素使用的值高于1，则可能需要z-index

其余

  • 使用重要的填充来覆盖主要CSS规则，重置一些显示和垂直对齐到中间。

  • 圆形可以用高度和宽度+文本对齐和行高来固定（使用em值来匹配你的字体大小）

片段：

＆＃13;
＆＃13; 
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

header[role='banner'] {
  height: 100px;
  background-color: yellow;
  top: 0px;
  width: 100%;
  z-index: 10000;
  border-bottom: 1px solid #ccc !important;
}


/* SOME THING HER CAUSES THE CART TO BECOME UNCLICKABLE*/

header[role='banner']:before {
  display: block;
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.02);
  z-index: 0;
}

#main-nav-wrapper {
  display: block !important;
  margin-top: 10px;
}

.nav {
  float: left;
  clear: none;
  border: 0;
  margin: 0px;
  z-index: 100;
  display: block;
  list-style: none;
  margin-top: 30px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.nav li {
  float: left;
  position: relative;
}

.nav li a {
  padding: 0px 20px !important;
  display: block;
  text-decoration: none;
}

.nav li a:after {
  content: '';
  width: 1px;
  height: 15px;
  background-color: #e8e8e8;
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -7px;
}


/* CART */

.cart-contents:before {
  font-family: 'FontAwesome';
  font-size: 28px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  padding-right: 5px;
  vertical-align: middle;
  display: inline-block;
}

.cart-contents:hover {
  text-decoration: none;
}

.cart-contents-count {
  color: #fff;
  background-color: #2ecc71;
  font-weight: bold;
  border-radius: 10px;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

.cart-placement {
  float: right;
  padding: 15px!important;
  /* overwrite any reset elsewhere*/
  line-height: 50px;
  padding: 0;
}

a.cart-contents {
  color: #ff7454 !important;
}

a.cart-contents {
  position: relative;
}

.cart-contents-count,
.fa {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em
}
＆＃13; 
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<header class="header" role="banner">
  <nav role="navigation">

    <div class="cart-placement">

      <a class="cart-contents" href="http://www.bbc.uk.co" title="add to cart"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
                      <div class="cart-contents-count">1</div>
                  </a>
    </div>
    <div id="main-nav-wrapper">
      <ul class="nav main-nav clearfix">
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Home</a></li>
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">About</a></li>
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>
＆＃13;
＆＃13;
＆＃13;

  • 链接中的div应为内联标记，例如span。

答案 2 :(得分：0)

将z-index更改为之前元素的-1，如下所示：

header[role='banner']:before{
    z-index: 0;
    ...
}
相关问题
最新问题