我需要鼠標懸停的CSS代碼當你懸停圖像時，它將顯示1px的邊界顏色和在總div的rgba中的顏色不透明度，但不改變在h3標籤和之前的文本的不透明度。與此同時，在懸停文本之前和之後顏色將會像附圖一樣改變。雖然我在這裏，但我知道我的CSS代碼是錯誤的。這裏是jsFiddle Demo 懸停div rgba與背景圖像，而不改變文本顏色的不透明度

這裏分別是HTML和CSS代碼---

HTML：

<div class="service-single-box relax-massage"> 
    <h3 class="service-title">Relax Massage</h3> 
</div>

CSS：

.service-single-box { 

    cursor: default; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    height: 136px; 
    } 


.service-single-box:hover, .service-single-box:focus{ 

    background-color:rgba(0,0,0,0.5); 
    border-top: 1px solid #ab9661; 
    border-left: 1px solid #ab9661; 
    border-bottom: 2px solid #ab9661; 
    border-right: 2px solid #ab9661; 
    cursor: default; 

    } 


.service-single-box img:hover, .service-single-box img:focus{ 

    background-color: #282318; 
    border: 1px solid #ab9661; 
    cursor: default; 
    background-color:rgba(0,0,0,0.5); 

    } 


.relax-massage{ 

    background-image: url("../images/services.png"); 
    } 

.relax-massage h3{ 

    color:#fdfdfb; 
    text-transform: uppercase; 
    font-size: 16px; 
    font-weight: bold; 
    width: 170px; 
    padding-top: 20px; 
    } 


.relax-massage h3:hover{ 

    color:#a4905d; 
    } 


.relax-massage h3:before { 

    width: 28%; 
    background: none repeat scroll 0 0 #fdfdfb; 
    border-top: 1px solid #fdfdfb; 
    content: ""; 
    height: 5px; 
    top: 28px; 
    position: absolute; 
    }

來源

2014-09-04 user44690

請參閱網頁設計[這裏]（http://www.shop4localdeals.com/massage/wp-content/uploads/2014/09/services.jpg） – user44690 2014-09-04 05:29:30

此代碼僅適用於changi以前的文字和h3的顏色。但是當我把整個div的懸停顏色放在rgba中時，它不起作用。當我將鼠標懸停在它上面時，你能否爲它提供任何解決方案？rgba顏色將會改變，而不會改變文本和h3的當前懸停顏色。只有不透明工作，但rrgba不起作用。 [fiddle here]（http://jsfiddle.net/rubel01/0caj74dv/3/） – user44690 2014-09-04 16:07:12

更改CSS像這樣的（主要是你對一些可視化變化做了什麼以及需要做些什麼改變才能使它像你想要的那樣工作）：

body{background:#333;} 
.service-single-box { 
    cursor: default; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    width:200px; 
    height: 136px; 

    } 


.service-single-box:hover, .service-single-box:focus{ 
    background-color:rgba(0,0,0,0.5); 
    border-top: 1px solid #ab9661; 
    border-left: 1px solid #ab9661; 
    border-bottom: 2px solid #ab9661; 
    border-right: 2px solid #ab9661; 
    cursor: default; 

    } 


.service-single-box img:hover, .service-single-box img:focus{ 
    background-color: #282318; 
    border: 1px solid #ab9661; 
    cursor: default; 
    background-color:rgba(0,0,0,0.5); 

    } 


.relax-massage{ 
    background-image: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/750/cache/5-week-in-space-278_75042_600x450.jpg"); 
    border:1px solid 
    } 

.relax-massage h3{ 
    color:#fdfdfb; 
    text-transform: uppercase; 
    font-size: 16px; 
    font-weight: bold; 
    width: 170px; 
    padding-top: 20px; 
    } 


.relax-massage h3:hover{ 
    color:#a4905d; 
    } 


.relax-massage h3:before { 

    width: 28%; 
    background: none repeat scroll 0 0 #fdfdfb; 
    border-top: 1px solid #fdfdfb; 
    content: ""; 
    height: 5px; 
    top: 28px; 
    position: absolute; 
    } 

.relax-massage:hover > h3:before{ 
    background:#a4905d; 
    border-top:none; 
    }

你可以看到一個fiddle here

透明度更新：

HTML代碼：

<div class="service-single-box relax-massage"> 
    <div class="overlay"> 
     <h3 class="service-title">Relax Massage</h3> 

    </div> 
</div>

CSS代碼：

body { 
    background:#333; 
} 
.service-single-box { 
    cursor: default; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    width:200px; 
    height: 136px; 
} 
.service-single-box:hover, .service-single-box:focus { 
    background-color:rgba(0, 0, 0, 0.5); 
    border-top: 1px solid #ab9661; 
    border-left: 1px solid #ab9661; 
    border-bottom: 2px solid #ab9661; 
    border-right: 2px solid #ab9661; 
    cursor: default; 
} 
.service-single-box img:hover, .service-single-box img:focus { 
    background-color: #282318; 
    border: 1px solid #ab9661; 
    cursor: default; 
    background-color:rgba(0, 0, 0, 0.5); 
} 
.relax-massage { 
    background-image: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/750/cache/5-week-in-space-278_75042_600x450.jpg"); 
    border:1px solid #333; 
} 
.relax-massage h3 { 
    color:#fdfdfb; 
    text-transform: uppercase; 
    font-size: 16px; 
    font-weight: bold; 
    width: 170px; 
    padding-top: 35px; 
} 
.overlay:hover > h3 { 
    color:#a4905d; 
} 
.relax-massage h3:before { 
    width: 28%; 
    background: none repeat scroll 0 0 #fdfdfb; 
    border-top: 1px solid #fdfdfb; 
    content:""; 
    height: 5px; 
    top: 28px; 
    position: absolute; 
} 
.overlay:hover > h3:before { 
    background:#a4905d; 
    border-top:none; 
} 
.overlay { 
    background:transparent; 
    display:block; 
    width:100%; 
    height:100%; 
    position:relative; 
    top:-15px; 
} 
.overlay:hover { 
    background:rgba(0, 0, 0, 0.5) 
}

來源

2014-09-04 05:47:53 Devin

Helle Fabio，您的解決方案僅適用於以前更改文本和h3的顏色。但是當我把整個div的懸停顏色放在rgba中時，它不起作用。當我將鼠標懸停在它上面時，你能否爲它提供任何解決方案？rgba顏色將會改變，而不會改變文本和h3的當前懸停顏色。只有不透明工作，但rrgba不起作用。 [小提琴在這裏]（http://jsfiddle.net/rubel01/0caj74dv/3/） – user44690 2014-09-04 16:06:00

啊，我並沒有完全理解你想要什麼，請參閱http://jsfiddle.net/u64ffqn5/爲此行爲。基本上，你需要包括一個容器盒，所以你可以風格它 – Devin 2014-09-04 18:12:58

嗨法比奧，得到了你的確切解決方案。謝謝你效力。真的感謝。我也發現了一個解決方案。以下是。 – user44690 2014-09-05 06:51:42

這裏是另一個SLOUTION ------------

JSFiddle

HTML代碼

<div class="service-single-box relax-massage"> 
     <h3 class="holder">Relax Massage</h3> 
    </div>

CSS代碼

.service-single-box { 

    margin-top: 22px; 
    margin-bottom: 15px; 
    position: relative; 
    text-align: center; 
    height: 140px; 
    width: auto; 
} 

.service-single-box:before { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: 0.2; 
    background-repeat: no-repeat; 
} 

.holder { 
    z-index: 2; 
    position: relative; 
} 

.service-single-box:hover{ 
    border:1px solid #a4905d;  
} 

.service-single-box h3:before { 
    width: 28%; 
    background: none repeat scroll 0 0 white; 
    border-top: 1px solid white; 
    content:""; 
    height: 5px; 
    top: 20px; 
    position: absolute; 
} 
.service-single-box:hover > h3:before { 
    background:#a4905d; 
    border-top:none; 

} 
.service-single-box:hover > h3{ 
    color:#a4905d; 
    border-top:none; 
} 

.relax-massage h3 { 
    color: #fdfdfb; 
    font-size: 15px; 
    font-weight: bold; 
    padding-top: 33px; 
    text-transform: uppercase; 
    width: 200px; 
} 
.relax-massage:before{ 
    background-image: url("../images/Relux massage.png"); 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: 0.5; 
    background-repeat: no-repeat; 
} 
.relax-massage:hover:before{ 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: 0.08; 
    padding-top:0px;   
}

來源

2014-09-05 07:53:46 user44690

懸停div rgba與背景圖像，而不改變文本顏色的不透明度

回答

HTML代碼

CSS代碼

相關問題