div पृष्ठभूमि रंग, onhover बदलने के लिए

91

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

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

केवल div के अंदर के लिंक को बैकग्राउंड कलर मिलता है ।

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

धन्यवाद

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

— Ionus जी स्टेन
स्रोत

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

— gaurang171

117

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

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

— हेनरिक पॉल
स्रोत

44

जावास्क्रिप्ट का उपयोग करना

   <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>

— ।
स्रोत

21

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

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

.Css पृष्ठ में

.div_hover { background-color: #FFFFFF; }

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

— वीरज भोरानिया
स्रोत

17

लिंक के रूप में पूरे 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>

सौभाग्य!

— शॉन
स्रोत

11

HTML कोड:

    <!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;
     }

और आप इस पर अपनी मंडली को लाल से नीले रंग में कैसे बदलते हैं।

— user3689455
स्रोत

5

सेट

display: block;

पर एक और कुछ ऊंचाई देना

— Jamol
स्रोत

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>

मुझे उम्मीद है कि इससे सहायता मिलेगी

— ताजवीर सिंह निज्जर
स्रोत

1

आप सिर्फ डिव के आस-पास लंगर डाल सकते हैं।

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

और फिर

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

— निकी
स्रोत

0

तुम सिर्फ लंगर टैग में div इस तरह शामिल हो सकता है:

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}

<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>

स्निपेट का विस्तार करें

— trickymind
स्रोत

-1

बस !importantअपनी सीएसएस फ़ाइल में संपत्ति बनाएं ताकि माउस पर पृष्ठभूमि का रंग बदल न जाए। मेरे लिए यह काम किया।

उदाहरण:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

— टी-जयंत डोर
स्रोत

आपको उत्तर के लिए कुछ और विवरण संलग्न करने का प्रयास करना चाहिए, क्योंकि यह निश्चित रूप से पूरी तरह से प्रश्न का उत्तर नहीं दे रहा है।

— Tatranskymedved