How to apply :hover on :after to certain div in CSS


Tags: javascript,jquery,html,css,html5

Problem :

Made an in-depth search and learnt on how to create some stylish custom created textboxes to achieve a better graphic look. I have two issues to complete this mesh-up of textboxes so that they serve a total functioning of a common textbox.

  1. I'm unable to execute the :focus on the parent div container, although the code is perfectly fine in CSS because when going by Inspect Element (Chrome), Force Element to> :focus it does what I want but in the real-time it never does nevertheless clicking on its children or itself.
  2. I want to add the :hover effect on the child div container (the left black coloured div) in which it'll expand the :after transition for a certain amount of pixels (assuming +20px/+30px).

The desired and the final result should look like in the picture below: Custom textfield issues

#submitForm {
    border:2px grey inset;
    border-radius:10px;
    display:table;
    margin: 10px auto 0;
    height: 500px;
    position:relative;
    width: 800px;
}
#submitForm #btnSend {
    bottom:20px;
    display:block;
    height: 50px;
    position:absolute;
    right: 20px;
    width:100px;
}
#submitForm .highlights {
    border-bottom:5px solid #2E8DEF;
    border-radius:15px;
    float:left;
    height: 45px;
    margin-top: 40px;
    margin-left:40px;
    width: 520px;
}
#submitForm .highlights:focus {
    border-bottom:none;
    outline: 0;
    -webkit-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
    -moz-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
    box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
}
#submitForm .tags, #submitForm .textarea {
    float:left;
    font-size: 25px;
    font-family: calibri;
    font-style: italic;
    height: 40px;
    position:absolute;
    text-align: center;
}
#submitForm .tags {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    background: #333333;
    color: #2E8DEF;
    height:40px;
    padding-top:5px;
    text-align: center;
    width: 120px;
    z-index:3;
}
#submitForm .tags:after {
    background: #333333;
    content:" ";
    display: block;
    left: 90px;
    height: 100%;
    position:absolute;
    top: 0;
    width: 30%;
    z-index:-1;
    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}
#submitForm .tags:hover {
    text-shadow: #2E8DEF 0px 0px 5px;
}
#submitForm .tags:after:hover {
    /* Code for expanding the skewed  .tags:after */
}
#submitForm .textarea {
    background-color:#F0F0F0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 120px;
    overflow: hidden;
    padding-top: 5px;
    width: 400px;
    appearance: field;
    -moz-appearance: field;
    -webkit-appearance: field;
}
#submitForm .textarea:focus {
    outline:0;
}

<forms id='submitForm'>
    <div id='formName' class='highlights'>
        <div class='tags'>Name</div>
        <div class='textarea' contenteditable></div>
    </div>
    <div id='formSurname' class='highlights'>
        <div class='tags'>Surname</div>
        <div class='textarea' contenteditable></div>
    </div>
    <div id='formAddress'class='highlights'>
        <div class='tags'>Address</div>
        <div class='textarea' contenteditable></div>
    </div>
    <div id='formCity' class='highlights'>
        <div class='tags'>City</div>
        <div class='textarea' contenteditable></div>
    </div>
    <div id='formPhone' class='highlights'>
        <div class='tags'>Phone</div>
        <div class='textarea' contenteditable></div>
    </div>
    <button id="btnSend" type="button" onclick='submitListOfProducts()'>Submit</button>
</forms>

And, the link to JS fiddle: http://jsfiddle.net/xa3nwhj4/1/



Solution :

Vishal provided the reason for the hover effect not working - this is my addition to it: - focus only fires on the textarea, but you want to change the style of the parent div

so lets change the css entry for #submitForm .highlights:focus to #submitForm .focusedhighlights

and then let jquery do the magic:

$(".textarea").focus(function(){ //event handler, to fire when a textarea gets focused
    $(this).parent().toggleClass("focusedhighlights") //toggle class on parent element for highlight effect
});

$(".textarea").focusout(function(){ //event handler to fire, when textarea gets unfocused
    $(this).parent().toggleClass("focusedhighlights") // toggle class to remove highlight effect
});

see working fiddle here: http://jsfiddle.net/vo59rgnd/2/


    CSS Howto..

    Styling the input type=“file”. How do i display the filepath?

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    how to style xml tag attribute with css

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to link a css file with the Slim templating engine?

    How to build a CSS template from scratch

    CSS: How to get a button to always be to the left of another button that's in a corner?

    How to change placeholder color for number input? (Firefox)

    CSS how to make icons look like they are inside the backround

    How to get width of
  • stretched to available space in parent
      in IE7?
  • How to set a width of the background (HTML and CSS)

    Hide all div element but show first two

    How does CSS height get applied to input fields?

    CSS rule doesn't show up in developer tools

    How to CSS pairs of DIV text left/right of center

    How to Add sub menu to dropdown menu in Blogger

    How to use CSS to style the results of a PHP echo?

    How to grey out a box in CSS

    How to rotate + flip element with CSS

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How to make `margin: top;` based on browser height?

    How to alternate rowcolor in a GridView using pure CSS?

    Show HTML text if window width is too small with CSS

    How to create a header that changes as you scroll down the page? [duplicate]

    How to apply CSS style in javascript for id generated at runtime

    How to use pure CSS to control other elements under same parent?

    Hide / show element if text is / isn't to long in jQuery

    how to make nested flexboxes work

    How to move text using CSS animation?

    CSS How to get rid of border that appears around custom button on and after click