悬停效果仅适用于特定的div

475

我正在努力实现以下目标。当您将鼠标悬停在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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章