购物车项目列表下拉箭头

时间：2017-04-11 06:40:43

标签： javascript html css

＆＃13;
＆＃13; 
        host.Description.Behaviors.Add(New ServiceMetadataBehavior() With {.HttpGetEnabled = True})
        host.Description.Behaviors.Find(Of ServiceDebugBehavior)().IncludeExceptionDetailInFaults = True
        host.Description.Behaviors.Find(Of ServiceDebugBehavior)().HttpHelpPageUrl = serviceUri

        host.AddServiceEndpoint(GetType(IMetadataExchange), MetadataExchangeBindings.CreateMexHttpBinding(), "mex")
＆＃13; 
.bagitem-main {
  margin: 0 auto;
  position: relative;
  min-width: 10px;
  max-width: 1260px;
  direction: rtl;
  background-color: green;
}

.bagitem-box {
  position: absolute;
  width: 290px;
  direction: ltr;
  background-color: white;
  border-radius: 2px;
  border: 1px solid #d6d6d6;
  pointer-events: auto;
  display: block;
  top: 4px;
  left: 0;
}

.bagitem-arrow {
  opacity: 1.0;
  position: absolute;
  background: #ffffff;
  margin-left: 19px;
  margin-top: 5px;
}

.bagitem-arrow::after,
.bagitem-arrow::before {
  opacity: 1.0;
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.bagitem-arrow::after {
  opacity: 1.0;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

.bagitem-arrow::before {
  opacity: 1.0;
  border-color: rgba(214, 214, 214, 0);
  border-bottom-color: #d6d6d6;
  border-width: 11px;
  margin-left: -11px;
}
＆＃13;
＆＃13;
＆＃13;

我正在开发一个购物车html网站。在那个网站上，我需要onclick购物车项目下拉菜单。在该下拉列表中，我需要此箭头和div 单独。我试图删除箭头和div之间显示的灰线，但不知道该怎么做。

enter image description here

4 个答案:

答案 0 :(得分：1)

这是因为您在border-color之前和之后已将bagitem-arrow添加到灰色。如果您不想要灰色border，请将z-index:1添加到bagitem-arrow课程。试试下面的代码：

.bagitem-main {
	margin: 0 auto;
	position: relative;
	min-width: 10px;
	max-width: 1260px;
	direction: rtl;
	background-color: green;
}

.bagitem-box {
	position: absolute;
	width: 290px;
	direction: ltr;
	background-color: white;
	border-radius: 2px;
	border: 1px solid #d6d6d6;
	pointer-events: auto;
	display: block;
    top: 4px;
    left: 0;
}

.bagitem-arrow {
	opacity: 1.0;
	position: absolute;
	background: #ffffff;
	margin-left: 19px;
	margin-top: 5px;
    z-index: 1; /* Add z-index to your arrow */
}

.bagitem-arrow::after, .bagitem-arrow::before {
	opacity: 1.0;
	bottom: 100%;
	left: 50%;    	
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.bagitem-arrow::after {
	opacity: 1.0;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
}

.bagitem-arrow::before {
	opacity: 1.0;
	border-color: rgba(214, 214, 214, 0);
	border-bottom-color: #d6d6d6;
	border-width: 11px;
	margin-left: -11px;
}
<div class="bagitem-arrow" id="bagitem-arrow"></div>
<div class="bagitem-main">          	
    <div class="bagitem-box">          		
        <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
        <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
        <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
        <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
        <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
        <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
    </div>
</div>

答案 1 :(得分：0)

尝试此代码 在课程z-index:1;

上添加.bagitem-arrow::after

＆＃13;
＆＃13; 
 .bagitem-main {
    	
    	margin: 0 auto;
    	position: relative;
    	min-width: 10px;
    	max-width: 1260px;
    	direction: rtl;
    	background-color: green;
    }




    .bagitem-box {
    	
  
    	position: absolute;
    	width: 290px;
    	direction: ltr;
    	background-color: white;
    	border-radius: 2px;
    	border: 1px solid #d6d6d6;
    	pointer-events: auto;
    	display: block;
        top: 4px;
        left: 0;
    	
    }

    .bagitem-arrow {
    	opacity: 1.0;
    	position: absolute;
    	background: #ffffff;
    	margin-left: 19px;
    	margin-top: 5px;
    	
    }
    .bagitem-arrow::after, .bagitem-arrow::before {
    	opacity: 1.0;
     	bottom: 100%;
    	left: 50%;
       	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    }

    .bagitem-arrow::after {
   		opacity: 1.0;
    	border-color: rgba(255, 255, 255, 0);
    	border-bottom-color: #ffffff;
    	border-width: 10px;
    	margin-left: -10px;
        z-index:1;
    }
    .bagitem-arrow::before {
    	opacity: 1.0;
    	border-color: rgba(214, 214, 214, 0);
    	border-bottom-color: #d6d6d6;
    	border-width: 11px;
    	margin-left: -11px;
    }
＆＃13; 
<!-- begin snippet: js hide: false console: true babel: false -->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

添加z-index: 1;，箭头位于前面。添加filter: drop-shadow(rgba(0, 0, 0, 1) 0px 0px 0px);以获取箭头的边框。并更改border-bottom-color: #ffffff;以匹配背景。 Check this fiddle

＆＃13;
＆＃13; 
.bagitem-main {
  margin: 0 auto;
  position: relative;
  min-width: 10px;
  max-width: 1260px;
  direction: rtl;
  background-color: green;
}

.bagitem-box {
  position: absolute;
  width: 290px;
  direction: ltr;
  background-color: white;
  border-radius: 2px;
  border: 1px solid #d6d6d6;
  pointer-events: auto;
  display: block;
  top: 4px;
  left: 0;
}

.bagitem-arrow {
  opacity: 1.0;
  position: absolute;
  background: #ffffff;
  margin-left: 19px;
  margin-top: 5px;
}

.bagitem-arrow::after,
.bagitem-arrow::before {
  opacity: 1.0;
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.bagitem-arrow::after {
  opacity: 1.0;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

.bagitem-arrow::before {
  opacity: 1.0;
  border-color: rgba(214, 214, 214, 0);
  border-bottom-color: #ffffff;
  border-width: 11px;
  margin-left: -11px;
  z-index: 1;
  filter: drop-shadow(rgba(0, 0, 0, 1) 0px 0px 0px);
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 1) 0px 0px 0px);
}
＆＃13; 
<div class="bagitem-arrow" id="bagitem-arrow"></div>
<div class="bagitem-main">
  <div class="bagitem-box">
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

代码段中缺少一个类：
.bagitem盒
删除边框属性，你很好。

相关问题
最新问题