What is Scrollbar And Mouse Hover? | Difference Between Scroll And Hover

What is HTML (HTML क्या है )?

HTML का पूरा नाम (Full Form) Hyper Text Markup Language होता है जिसका उपयोग वेबसाइट बनाने के लिए किया जाता है । Html एक प्रोग्रामिंग language होता है जिसका उपयोग Interactive web page बनाने के लिए किया जाता है । html की सहायता से हम विभिन्न प्रकार के pages आसानी से बना सकते है ।

" सरल शब्दो में कहे तो HTML विभिन्न प्रकार के Attribute,Tags, Properties elements का समूह होता है जिसका उपयोग static web-page बनाने के लिए किया जाता है । "

एक क्षैतिज या लंबवत बार जिसका उपयोग किसी विंडो में देखने के क्षेत्र को माउस या टचपैड या कीबोर्ड का उपयोग करके ऊपर, नीचे, बाएं या दाएं स्थानांतरित करने के लिए किया जाता है। स्क्रोल बार को विंडो के किसी खास हिस्से तक ले जाने के लिए आप ट्रैक पर क्लिक कर सकते हैं या बार पर क्लिक करके बार को किसी खास जगह पर ड्रैग कर सकते हैं। अधिक समझने में आपकी सहायता के लिए नीचे स्क्रॉल बार का स्क्रीनशॉट दिया गया है।

Note - html के बारे में हमने पिछले पोस्ट में पढा था अधिक जानने के लिए इस link पर क्लिक करे html क्या है ?

    What is Scroll Bar in HTML (स्क्रॉल बार क्या है )?

    एक Horizontal या  Vertical पट्टी जिसका उपयोग Mouse या Touchpad या Keyboard का उपयोग करके विंडो में देखने के Aria को ऊपर, नीचे, बाएँ या दाएँ (Up, Down, Left, Right) ले जाने के लिए किया जाता है।Scroll Bar को विंडो के किसी खास हिस्से तक ले जाने के लिए आप ट्रैक पर क्लिक कर सकते हैं या बार पर क्लिक करके बार को किसी खास जगह पर ड्रैग कर सकते हैं। अधिक समझने में आपकी सहायता के लिए नीचे स्क्रॉल बार का स्क्रीनशॉट दिया गया है।

    Scrollbar in html
    Scrollbar

    ऊपर दिए गए एनीमेशन में लेफ्ट साइड में जो पट्टी ऊपर निचे हो रहा है उसी को स्क्रॉल बार कहा जाता है ।

    How To Create Scroll Bar in HTML With CSS?

    HTML में Scroll Bar बनाने के लिए कोई स्पेसिफिक टैग डिफाइन नहीं क्या गया है यह आटोमेटिक डाटा कंटेंट के अनुशार बन जाता है अर्थात अगर विंडो screen से ज्यादा कंटेंट रहेगा तो आटोमेटिक स्क्रॉल बार क्रिएट हो जायेगा । CSS में हम कस्टम स्क्रॉल बार बना सकते है और अच्छे से डिजाईन कर सकते है, तो चलिए एक कस्टम स्क्रॉल बनाते है  - 

    ऊपर दिए गए Code सिंपल और सटीक है आप चाहे तो और भी टैग का use करके अधिक कंटेंट से स्क्रॉल बार बना सकते हो 

    • <body> - इस टैग से पेज में बॉडी को डिफाइन किये है ।
    • <div> - इस टैग के द्वारा हमने <body> के अन्दर एक खाली स्पेस लिए है जिसकी Width  (लम्बाई):150px , height (ऊंचाई ): 150px, line-height: 3em;
    • Overflow: Scroll; यही से समझते है, यदि ऊपर दिए गए Style (CSS) के Accourding अगर लम्बाई और चौड़ाई  ज्यादा हो जाता है अर्थात ओवरफ्लो हो जायेगा इसलिए हमने ओवरफ्लो को Scroll Properties में रख दिया है ताकि जब भी ओवरफ्लो  हो तो उसे स्क्रॉल के अन्दर ले आये ।
    • <ul>,<li> - इस टैग का use हमने Example के Purpose से  किया है आप इसके जगह कोई भी टैग use कर सकते हो ।

    What is Hover in HTML ?

     Hover को हम Onclick और  unclickable Hilighter समझ सकते है यह mouse के on cursor पर डिपेंड कर्ट है। इसका उपयोग ज्यादातर hyperlink जैसे <a> tag पर किया जाता है लेकिन आप इसका उपयोग किसी भी एलिमेंट पर कर सकते है ।

    अगर हम किसी एलिमेंट पर अगर hover लगा दे तो उस element पर माउस कर्सर को ले जाने पर वह highlight होता है अर्थात पुरे एलिमेंट का कलर Change हो जाता है ।



    ऊपर दिए गए कोड में हमने सिंपल mouse hover क्रिएट किये हैं आप चाहे तो अलग तरीके से क्रिएट कर सकते हो 

    a:link {  color: green; } - इसका मतलब यह है की अगर आप कोई link दिए हो और उसमे कोई रंग देना चाहते हो तो इस प्रॉपर्टीज का उपयोग किये हैं और  उसमे विजिट नहीं किये हो तो By default अपने जो link color दिए हो ओ वही color दिखेगा 

    a:visited {  color: green; } - इस css प्रॉपर्टीज का use हमने विजिटेड link कलर के लिए किये हैं अर्थात अगर अपने एक बार link पर क्लिक दिए हो तो इसका link color चेंज हो जायेगा 

    a:hover { color: red; } - mouse cursor  को link पर ले जाने पर यह color hover होगा 

    a:active {  color: yellow; } - इस प्रॉपर्टीज का use हमने एक्टिव link के लिए किये है

    Difference Between Scroll Bar And Hover - 

    Scrollbar Hover
    1. यह एक CSS फंक्शन है यह एक CSS Properties है
    2. इसका उपयोग कंटेंट या पेज के एरिया को ऊपर निचे दायें बांयें विंडो screen पर देखने के लिए किया जाता है इसका उपयोग link या कोई भी एलिमेंट पर color या mouse cursor hover color देने के लिए किया जाट है
    3. यह पेज के कंटेंट के आधार पर बनता है यह mouse cursor पर Dipend करता है
    4. इसकी css Properties scroll होता है इसकी css Properties hover होता है
    5. यह सभी ब्राउज़र में supportable नहीं होता है यह सभी ब्राउज़र में supportable होता है

    FAQ in HTML

    How do I make text hover in HTML?

    Take a container tag and give the class name, now through CSS class _name: hover { color: red; } add. You can hover over any element of HTML.

    Can you use hover on a class in CSS?

    The: hover selector CSS pseudo-class is used to style elements when the mouse hovers over them. It can be used on every element. We can style the links for unvisited pages using the: link selector, for styling the links to visited pages, use the: visited selector & for styling the active link, use the: active selector. (Accourding to geeksforgeeks)

    How do I add a scrollbar in HTML?

    To create a scroll bar you have to use scroll in CSS properties overflow.For a vertical scrollable bar use the x and y axis. Set the overflow-x: hidden; and overflow-y: auto; which will automatically hide the horizontal scroll bar and present only the vertical scrollbar. Here the scroll div will be vertically scrollable.

    Post a Comment

    0 Comments