HOVER & OVERFLOW PROPERTIES

CSS hover :


The :hover selector is for selecting the elements when we move the mouse on them. It is not only limited to the links. We can use it on almost every HTML element. To style the link to unvisited pages, we can use the :link selector. To style the link for visited pages, we can use the :visited selector and to style the active links we can use the :active selector. It is introduced in CSS1. The hover can be used to highlight the web pages as per the preference of users in an effective web-designing program.
The hover feature includes the following effects:
  • Change the color of the background and font.
  • Modify the opacity of the image.
  • Text embedding.
  • Create image rollover effects.
  • Swapping of images.

  • Basically, the hover effect modifies the element's property value to enable the animate changes on a stated image/text or the corresponding elements.
    Embedding of the hover elements in the web pages makes them interactive and functional. Generally, the hover feature is compatible with all of the main browsers.
    But, it will be a challenging task to implement it on touch devices. It is observed that an active hover function gets stuck on the non-supportive device.
    Syntax :
        :hover {  
        css declarations;  
        }
    
    Example 1: Changing the link color on hover by using CSS
    Let's see how the color of the link gets changed when we place the cursor on it. It will create a stylish effect, and its implementation is easy when we are using CSS.
        < html>  
        < head>  
        < style>  
            body{text-align:center;}  
            a {color: red;}  
            a:hover {color: green;}              
            a:active{color: cyan;}  
        < /style>  
        < /head>  
        < body>  
            < h1>Move your mouse on the below link to see the hover effect.< /h1>  
            < a href ="https://tesdbacademy.com/">CSS Grid< /a>  
        < /body>  
        < /html>
    
    Output :

    Move your mouse on the below link to see the hover effect.

    CSS Grid

    Example 2: Apply hover on paragraph, heading and link
        < html>  
        < head>  
        < style>  
            body{ text-align:center;}  
            p:hover, h:hover, a:hover{background-color: lightgrey;}  
        < /style>  
        < /head>  
        < body>  
            < h1 id="h">Hello World< /h1>  
            < p>Welcome to the TesDBAcademy.< /p>  
        < /body>  
        < /html> 
    
    Output :

    Hello World

    Welcome to the TesDBAcademy.





    CSS Overflow


    The CSS overflow property specifies how to handle the content when it overflows its block level container. We know that every single element on a page is a rectangular box and the size, positioning and behavior of these boxes are controlled via CSS.

    CSS Overflow property values

        Value	                                        Description
       ---------   ----------------------------------------------------------------------------------------------------------
        visible	    It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
        hidden	    It specifies that the overflow is clipped, and rest of the content will be invisible.
        scroll	    It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
        auto	    It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
        inherit	    It inherits the property from its parent element.
        initial	    It is used to set the property to its initial value
    
    Eg:
        < !DOCTYPE html>  
        < html>  
        < head>  
        < style>  
            div.scroll {  
                background-color: #00ffff;  
                width: 150px;  
                height: 150px;  
                overflow: scroll;  
            }  
            div.hidden {  
                background-color: #00FF00;  
                width: 150px;  
                height: 150px;  
                overflow: hidden;  
            }  
        < /style>  
        < /head>  
        < body>  
            < p>The overflow property specifies what to do if the content of an element exceeds the size 
            of the element's box.< /p>  
            < p>overflow:scroll< /p>  
            < div class="scroll">You can use the overflow property when you want to have better control of the layout.  
            The default value is visible.< /div>  
            < p>overflow:hidden< /p>  
            < div class="hidden">You can use the overflow property when you want to have better control of the layout.   
            The default value is visible.< /div>  
        < /body>  
        < /html>
    
    Output :

    The overflow property specifies what to do if the content of an element exceeds the size of the element's box.

    overflow:scroll

    You can use the overflow property when you want to have better control of the layout.The default value is visible.


    overflow:hidden

    You can use the overflow property when you want to have better control of the layout.The default value is visible.




    (CSS - Float Properties)