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

    How to apply css to php 'echo $tube->error;'?

    How to have dots as horizontal separator with inline text like in this screenshot?

    How to distribute p:menuitems in p:menubar accordingly?

    How to make child element do not fill his parent when hover is performed in CSS?

    How to ensure three DIV are the same height regardless of content

    How to put inline circles made in CSS under each other when screen scales?

    How are new lines made with text as background?

    How to changing css on bootstrap button Group

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How do I align elements using CSS?

    How to make a number of breaks in CSS? [closed]

    How to make container 100% of parent if it have ul inside

    How to position a css radial gradient to the top left responsively?

    How to make IE support min-width / max-width CSS properties?

    How make input element take up available space next to a fixed width element?

    webkit just cuts off decimals in css number … how to workaround?

    How to write this css in shorter way? see example

    How to make a dotted underline link on hover?

    How to combine multiple CSS declarations to shorthand

    CSS Flexbox : How to construct a specific layout

    How do you spin side to side using css3 animation?

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    How to align text sideways using css transform

    How can I use javascript, html and css to make an image a button, which can do the following?

    What is the best way to store css data inside database and call it similar to how a css file would be

    jQuery - How to adjust CSS filter (blur)?

    How to use Vendor Properties in Multiple Backgrounds?

    How to Highlight the Menu in css. I used a:active but it does not serve the purpose I expected

    How do I apply CSS to the table generated into another window?

    How to create a WoW-like cooldown effect?