将鼠标悬停在效果上仅适用于特定div

时间：2016-08-26 23:41:26

标签： html css html5 css3

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

1 个答案:

答案 0 :(得分：1)

您可以使用:not()伪类排除某些元素 .well.sb:hover div:not(.brandmas):not(.categorymas) {}

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题