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.
- 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.
- 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:
#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..
Add a change event to the input field, and then just get it's .value. Example (using jQuery): $('input[name="uploadfile"]').change(function(){ var fileName = $(this).val(); alert(fileName); }); DEMO: http://jsfiddle.net/hjNEC/2/ EDIT: Since the input...
The priority of css rules is not just based on the order in which they appear: more specific rules win over less specific. Eg, in this case div.bar div.foo {...
Something like this? Demo CSS u:before { content: attr(n) ') ' attr(start) ' - ' attr(end); color: #999900; padding-right: 30px; font-size: 9pt; } You can have multiple attr() inside. Just...
You can check below code it will work for you $('ul > li > a').click(function () { $('#all_contents >div').hide(); var $this = $(this); var target = $this.attr('href'); $(target).show(); return false;...
Sinatra expects your css files files to reside in the public directory, not within the views directory by default. So your project tree should look more like this. /essai.rb /views...
Everything and anything you ever wanted to learn about css can be found at a list apart. You might also like css garden. Great, real world examples you can pick...
I think a little of both approaches needs to be done here. First in order to get the buttons to layout in the corner with text wrap you will have...
try this :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } http://jsfiddle.net/hbirjand/7x61fmgt/ BUT...
You can accomplish the sort button styling, by using box-shadow - and inset to get the shadow inside the button. As well as border-radius for rounding the corners. HTML <a...
Here is a solution if you want to use Jquery (function () { $("ul#nav > li").each(function () { var width = 0; $("ul > li", $(this)).each(function () { var w...
This should be the code. body { /*or whatever element*/ background-size:#px #px; /*replace size for #'s*/ background-repeat: no-repeat; } ...
You can do it easily with CSS (no need of Javascript) span:nth-child(n+4) { display:none; // hide all spans starting from 4th child } ul:nth-child(n+5) { display:none; // hide all uls...
This actually seems like a bug in Chrome / Safari. Firefox and Opera renders them correctly. One way to fix this so it renders the same in all browsers, are...
IE8 might be having trouble parsing url(...)no-repeat with no whitespace separating the two values. See if adding a space there fixes the problem. It's not clear from any spec if...
From what I understand this is what you want.. .container{ text-align:center; } .container>div{ display:inline-block; vertical-align:top; } .rightofcenter+.leftofcenter{ display:block; } http://jsfiddle.net/uzbs4Lax/...
try this css , this may help u... #nav { list-style:none inside; margin:0; padding:0; text-align:center; } #nav li { display:block; position:relative; float:left; background: #006633; /* menu background color */ }...
Instead of using breaks use paragraph tags. <p><?php echo $row['imagename']; ?></p> For example. Then you can assign classes to the paragraph tags. So if you want to assign a class...
Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A...
I fiddled with jsfiddle, and this worked: $('#photo').css('transform', 'rotate(90deg) scaleX(-1)'); To relate it to your question, the resulting CSS looks like transform: rotate(90deg) scaleX(-1); ...
Create a custom binding handler to initialize and update the jScrollPane instance: ko.bindingHandlers.jScrollPane = { init: function(element, valueAccessor) { var o = valueAccessor() || {}; // initialize $(element).jScrollPane(o.options); var reinit...
Give .main_content a margin-top of 100vh (just beneath the viewport), and then use transformY to pull it back up: .main_content { text-align: center; padding: 20px; margin-top: 100vh; transform: translateY(calc(-100% -...
You are using CSS3, which is not supported by all browsers. To do this in a cross-browser compatible way you need to use alternating class, jQuery, or some other method...
You can try this https://jsfiddle.net/2Lzo9vfc/154/ CSS @media (max-width: 500px) { section table { display: none; } section:after { content: "There is not enough space to show table"; } } Or...
Here is a generic solution. This involves having multiple headers (which can have totally different content inside) from which you selectively display one depending on the scroll position. Each header...
You should use CSS class var mContainer = document.createElement("div"); //adds class "table-div" to element mContainer.classList.add('table-div'); .table-div tr:nth-child(even) { background-color: grey; } ...
When you hover the .parent, change the style of all children that are not hovered as well (pen): .parent { width: 100px; /** limit the width of the parent, so...
How about that: if (spanResultsHeight > 30 || $divResults.is(':hidden')) { $spanResults.hide(); $resultsPopup.appendTo('#container-cpanel').fadeIn(400); } else { $spanResults.show(); }; jsFiddle...
Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is...
You should position the base element which is being animated for the top to bottom animation to work. #movetxt { position: relative; -webkit-animation: moving 5s infinite; animation: moving 5s infinite;...
Addind the rule: outline: 0; should do the work...