सीएसएस: होवर पर एक तत्व को हल्का करें

Question

एक तत्व मानना ​​100% संतृप्ति, अस्पष्टता, आदि पर है ... मैं कैसे पृष्ठभूमि आच्छादित होने पर थोड़ा हल्का हो सकता हूं?

उपयोग का मामला यह है कि मैं किसी उपयोगकर्ता को किसी पृष्ठ पर किसी तत्व पर होवर करने की अनुमति दे रहा हूं। मैं 80% अस्पष्टता के बराबर प्रत्येक रंग को निर्धारित करने के आसपास नहीं जाना चाहता हूं।

एक विधि opacity: 0.4 को बदलने के लिए है, लेकिन मैं केवल पृष्ठभूमि को बदलना चाहता हूं।

Answer 1

आप ऐसा करने RGBA विधि (background-color:rgba(R,G,B,alpha);) का उपयोग करना चाहिए:

.element{ 
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/ 
} 
.element:hover{ 
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/ 
} 

FIDDLE

और यह IE8 में काम करते हैं या कम भी यहाँ बनाने के लिए अगर आप दृढ़ता से की जरूरत है कि यह कैसे आता है:

.element:hover{ 
background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */ 
     zoom: 1; 
} 

ध्यान दें कि startColorstr और endColorstr मूल्यों इसकी तरह बनाया जाता है(जहां एए अल्फा चैनल है) और यदि आप रंग से दूसरे रंग में ढाल प्रभाव नहीं चाहते हैं तो यह वही होना चाहिए।

Answer 2

मैं पारंपरिक पृष्ठभूमि की बजाय :after छद्म तत्व का उपयोग करूंगा। यह आईई 8 में समर्थित है, जहां rgba() नहीं है।

HTML:

<div class="hoverme"> 
    <p>Lorem ipsem gimme a dollar!</p> 
</div> 

सीएसएस:

.hoverme { 
    position: relative; 
} 
.hoverme:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background-color: #fff; 
    z-index: -1; 
} 

.hoverme:hover:after { 
    background-color: #ddd; 
} 

या कुछ इस तरह।

http://caniuse.com/#search=%3Aafter

एक चिकनी परिणाम के लिए, एक CSS3 के संक्रमण जोड़ें:

.hoverme:after { 
    -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ 
     -o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */ 
      transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ 
} 

पिछले टुकड़ा की नकल की और http://css3please.com

http://jsfiddle.net/ghodmode/6sE9E/

Answer 3

से चिपकाया गया था आप background-color बदलना चाहते हैं अस्पष्टता का उपयोग किये बिना किसी भी तत्व की हल्कीता। दुर्भाग्य से । मुझे नहीं लगता कि यह आपके hovers के लिए विशिष्ट background-color मान सेट किए बिना संभव है।

उपयोग के मामले है कि मैं एक उपयोगकर्ता एक पृष्ठ पर किसी भी तत्व पर होवर करने के लिए अनुमति कर रहा हूँ है। मैं 80% अस्पष्टता पर प्रत्येक रंग समतुल्य को निर्धारित करने के आसपास नहीं जाना चाहता हूं।

एक विकल्प है जिसे मैं सोच सकता हूं लेकिन इसे पूरे तत्व पर एक पारदर्शी पीएनजी ओवरले की आवश्यकता होगी, जिसमें किसी तत्व की सामग्री भी शामिल होगी। इस प्रकार आपकी समस्या को हल नहीं किया जा रहा है।

संबंधित प्रश्न: Dynamically change color to lighter or darker by percentage CSS (Javascript)

Answer 4

आप केवल filter: brightness(); का उपयोग कर सीएसएस के साथ ऐसा कर सकते हैं लेकिन यह केवल वर्तमान में वेबकिट ब्राउज़रों में समर्थित है। देखें http://jsfiddle.net/jSyK7/

Answer 5

यह एक लंबे समय पहले है, लेकिन आप कुछ इस तरह कर सकते हैं:

.element { 
    background-color: red; 
} 
.element:hover { 
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); 
} 

आप एक नंबर आप चाहते हैं में 100px बदल सकते हैं। मैंने पूरे तत्व को कवर करने के लिए एक बड़ा लिया।

यह एक बहुत ही सुंदर समाधान नहीं है लेकिन यह काम करता है!

एक उदाहरण यहाँ: http://jsfiddle.net/6nkh3u7k/5/

Answer 6

यहाँ एक आसान तरीका यह करना है: तत्व पहले से ही के रूप में उज्ज्वल के बाद से यह हो सकता है के रूप में,

.myElement:hover { 
    filter: brightness(150%); 
}