2009-03-24 22 views
75

बदलने के लिए मैं पर माउस पर div की पृष्ठभूमि रंग परिवर्तन करने की कोशिश कर रहा हूं।div पृष्ठभूमि रंग, ऑनहोवर

div {पृष्ठभूमि: सफेद;}
div एक: मंडराना {पृष्ठभूमि: ग्रे; चौड़ाई: 100%;
प्रदर्शन: ब्लॉक; text-decoration: कोई नहीं;}

केवलdiv अंदर लिंक पृष्ठभूमि रंग हो जाता है।

पूरे div को पृष्ठभूमि रंग प्राप्त करने के लिए मैं क्या कर सकता हूं?

धन्यवाद

संपादित करें:
कैसे मैं पूरी div एक कड़ी के रूप में कार्य करने के लिए कर सकते हैं - जब आप उस div पर कहीं भी क्लिक करें, एक पते पर ले करने के लिए।

+0

इस लिंक को आजमाएं http://codebins.com/codes/home/4ldqpc0 – gaurang171

उत्तर

102

"a:hover" सचमुच ब्राउज़र को <a> -tag के गुणों को बदलने के लिए कहता है, जब माउस उस पर आच्छादित होता है। आप शायद "the div:hover" का मतलब था, जो div को चुना गया था जब ट्रिगर करेगा।

बस यह सुनिश्चित करने के लिए कि, यदि आप केवल एक विशेष div को बदलना चाहते हैं, तो इसे एक आईडी दें ("<div id='something'>") और इसके बजाय सीएसएस "#something:hover {...}" का उपयोग करें। आप, divs के एक समूह को संपादित उन्हें एक श्रेणी ("<div class='else'>") में बनाने के लिए और इस मामले में सीएसएस ".else {...}" उपयोग करना चाहते हैं (वर्ग 'नाम से पहले की अवधि ध्यान दें!)

36

जावास्क्रिप्ट

का उपयोग करना
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';"> 
    Jack and Jill went up the hill 
    To fetch a pail of water. 
    Jack fell down and broke his crown, 
    And Jill came tumbling after. 
    </div> 
5

सेट

display: block; 
एक पर

और कुछ ऊंचाई

16

अल रूप में पूरे div अधिनियम बनाने के लिए दे स्याही, एंकर टैग को इस प्रकार सेट करें:

display: block 

और एंकर टैग की अपनी ऊंचाई 100% पर सेट करें। फिर अपने div टैग पर एक निश्चित ऊंचाई निर्धारित करें। फिर सामान्य रूप से अपने एंकर टैग को स्टाइल करें।

उदाहरण के लिए:

<html> 
<head> 
    <title>DIV Link</title> 

    <style type="text/css"> 
    .link-container { 
     border: 1px solid; 
     width: 50%; 
     height: 20px; 
    } 

    .link-container a { 
     display: block; 
     background: #c8c8c8; 
     height: 100%; 
     text-align: center; 
    } 

    .link-container a:hover { 
     background: #f8f8f8; 
    } 

    </style> 

</head> 
<body> 

    <div class="link-container"> 
     <a href="http://www.stackoverflow.com">Stack Overflow</a> 
    </div> 

    <div class="link-container"> 
     <a href="http://www.stackoverflow.com">Stack Overflow</a> 
    </div> 

</body> </html> 

गुड लक!

1

आप सिर्फ div के चारों ओर एंकर लगा सकते हैं।

<a class="big-link"><div>this is a div</div></a> 

और फिर

a.big-link { 
background-color: 888; 
} 
a.big-link:hover { 
background-color: f88; 
} 
17

लंगर डाल करने के लिए कोई जरूरत नहीं है।होवर पर div की शैली बदलने के लिए होवर पर div का पृष्ठभूमि रंग बदलें।

<div class="div_hover"> Change div background color on hover</div> 

.css पेज

.div_hover { background-color: #FFFFFF; } 

.div_hover:hover { background-color: #000000; } 
3

बस कोशिश "मंडराना" सीएसएस की संपत्ति। उदाहरण के लिए:

<html> 
<head> 
    <style> 
     div 
     { 
      height:100px; 
      width:100px; 
      border:2px solid red; 
     } 
     div:hover 
     { 
      background-color:yellow; 
     } 
    </style> 
</head> 
<body> 
      <a href="#"> 
         <div id="ab"> 
           <p> hello there </p> 
         </div> 
      </a> 
</body> 

मैं इस में मदद मिलेगी आशा

9

एचटीएमएल कोड:

<!DOCTYPE html> 
    <html> 
    <head><title>this is your web page</title></head> 
    <body> 
    <div class = "nicecolor"></div> 
    </body> 
    </html> 

सीएसएस कोड:

.nicecolor { 
     color:red; 
     width:200px; 
     height:200px; 
    } 

    .nicecolor:hover { 
     color:blue; 
    } 

और thats कैसे आप नीले लाल से अपने div बदल इस पर होवरिंग द्वारा।

संबंधित मुद्दे