我正在努力实现以下目标。当您将鼠标悬停在div产品标题上时,背景颜色以及文本颜色都会改变,都很好。但是,上述div中的字体颜色也会因CATEGORY和BRAND(在图像的角落)而改变。而且我不想要。其余的都很好,就像我想要的那样。当您将鼠标悬停在产品标题上时,该部分(品牌和类别字体-文本-颜色)必须保持原样(=灰色,而不是白色)。如何做到这一点(将产品标题悬停在产品标题div上,然后将其更改(字体颜色和背景颜色,并保持其他所有状态不变,因为一切都很好)。
.image-video-linkmas {
position: relative;
display: inline-block;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.product-detailsmas .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #000;
color: #fff;
/* vertical-align: middle; */
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.image-video-linkmas:hover .overlay {
opacity: 1;
}
.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin: 5px;
}
.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin:5px
}
.well.sb .product-titlesidebar:hover {
color:#FFF;
text-decoration:none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.brandmas {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: 0.9;
position: absolute;
opacity: 0.7;
top: 0;
right: 0;
/* min-height: 0; */
}
.categorymas {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
/* outline: 1px solid #fff; */
padding: 2px 20px 2px 8px;
background-color: yellow;
position: absolute;
opacity: 0.7;
bottom: 0;
right: 0;
/* min-height: 0; */
}
.well.sb:hover div {
color: #FFF;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin: 5px;
}
<div class="well sb">
<a href="#" target="_blank">
<div class="product-detailsmas">
<div class="image-video-linkmas">
<img alt="#" src="http://lorempixel.com/150/150">
<div class="brandmas">
BRAND
</div>
<div class="categorymas">
CATEGORY
</div>
<div class="overlay">
<div class="subcategorycar">
CAT CAR
</div>
<div class="idcar">
ID CAR
</div>
<div class="tagscar">
TAGS CAR
</div>
<div class="part-numbercar">
P/N CAR
</div>
</div>
</div>
<div class="product-titlesidebar">
PRODUCT TITLE HEADER
</div>
</div></a>
</div>
您可以使用:not()
伪类排除某些元素。
.well.sb:hover div:not(.brandmas):not(.categorymas) {}
.image-video-linkmas {
position: relative;
display: inline-block;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.product-detailsmas .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #000;
color: #fff;
/* vertical-align: middle; */
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.image-video-linkmas:hover .overlay {
opacity: 1;
}
.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin: 5px;
}
.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin:5px
}
.well.sb .product-titlesidebar:hover {
color:#FFF;
text-decoration:none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.brandmas {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: 0.9;
position: absolute;
opacity: 0.7;
top: 0;
right: 0;
/* min-height: 0; */
}
.categorymas {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
/* outline: 1px solid #fff; */
padding: 2px 20px 2px 8px;
background-color: yellow;
position: absolute;
opacity: 0.7;
bottom: 0;
right: 0;
/* min-height: 0; */
}
.well.sb:hover div:not(.brandmas):not(.categorymas) {
color: #FFF;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin: 5px;
}
<div class="well sb">
<a href="#" target="_blank">
<div class="product-detailsmas">
<div class="image-video-linkmas">
<img alt="#" src="http://lorempixel.com/150/150">
<div class="brandmas">
BRAND
</div>
<div class="categorymas">
CATEGORY
</div>
<div class="overlay">
<div class="subcategorycar">
CAT CAR
</div>
<div class="idcar">
ID CAR
</div>
<div class="tagscar">
TAGS CAR
</div>
<div class="part-numbercar">
P/N CAR
</div>
</div>
</div>
<div class="product-titlesidebar">
PRODUCT TITLE HEADER
</div>
</div></a>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句