We Keep Coding

hover element below other element possibly hovered

I have a problem with my css.
i have some element generated by javascript and when i hover them i display another element but i don't know why, the new element displayed is below the others generated element...
this is my css about this problem:
.hiddenTextjob
{
display:none;
background-color:#000;
color:#FFF;
width:170px;
z-index:2!important;
height:55px;
}
.ghost_for:hover > .hiddenTextjob
{
display: block;
background-color:#000;
color:#FFF;
width:170px;
margin-top:-55px;
z-index:1!important;
}
.ghost_for
{
border: 0;
position:absolute;
background-color:blue;
z-index:1!important;
}
.hiddenTextjob is below ghost_for but he must be above...
Thanks by advance
[EDIT] here a jsfiddle to illustrate:
https://jsfiddle.net/95jtx2oL/
when you hover a blue element sometine the black hover is above sometime he is below that make me mad...

.ghost_for:hover {
z-index: 2!important;
}
The above code is enough to fix the issue ^^ jdfiddle
The issue was because of the stacking of HTML. The lower elements will be higher if they are on the same index. So if you can raise the z-index of the hovered element, it's child element will be higher as well.

It looks a bit strange that you set z-index to 1 here.
.ghost_for:hover > .hiddenTextjob
{
display: block;
background-color:#000;
color:#FFF;
width:170px;
margin-top:-55px;
z-index:1!important;
}
The initial value of 2 seems correct. Try to remove z-index from the above code or set it to 2.

I am unsure of your HTML but try this if it works for you:
.hiddenTextjob {
display: none;
background-color: #000;
color: #fff;
width: 170px;
z-index: 2 !important;
height: 55px;
}
.ghost_for:hover > .hiddenTextjob {
display: block;
background-color: #000;
color: #fff;
width: 170px;
margin-top: -55px;
}
.ghost_for {
border: 0;
position: absolute;
background-color: blue;
z-index: -1;
}

jquery hide div with CSS transition effect

I have one question about CSS hide transition using jquery hide function.
I have created this DEMO from codepen.io
In this demo you can see the show button. When you click the show button then .test and .user-image div opening with CSS transition effect .
I want to make it when clicked hide button then the .test div hide with CSS transition effect.
Anyone can tell me a little example how can i do that ?
CSS
<div class="container">
<div class="usr">Show</div>
<div class="test">
<div class="hide">Hide</div>
<div class="user-image" style="background-image:url(...);"></div>
</div>
</div>
JS
$(document).ready(function() {
$('.usr').click(function() {
$(".test").show();
});
$(".hide").click(function() {
$(".test").hide();
});
});

You don't need jQuery for this at all. Check this example:
http://codepen.io/anon/pen/JdKWWW
.hide-show-element {
background-color: #eee;
height: 400px;
position: relative;
text-align: center;
width: 400px;
}
.hide-show-element input[type='checkbox'] {
display: none;
}
.hide-show-element label {
background-color: #a00;
border: 1px solid #111;
color: #fff;
display: block;
text-align: center;
transition-duration: 0.4s;
}
.hide-show-element label:after {
display: block;
content: "Show";
}
.hide-show-element input:checked + label {
background-color: #fff;
border: 1px solid #a00;
color: #a00;
}
.hide-show-element input:checked + label:after {
content: "Hide";
}
.test1 {
opacity: 0;
position: relative;
height: 0;
top: 20%;
transition-duration: 0.4s;
width: 0;
}
.hide-show-element input:checked ~ .test1 {
opacity: 1;
height: 200px;
width: 200px;
}
<div class="hide-show-element">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<img class="test1" src="http://lorempixel.com/200/200" />
</div>

$('#id-of-your-div').fadeOut(); //fade out
$('#id-of-your-div').fadeIn(); //fade in div
check documentation for more info.

If you insist on using jQuery, that's very easy to achieve as well. Define the styles to transition to when showing in a separate css class .show. Add transition-duration: 0.5s; to .test.
Then
$(document).ready(function() {
$('.showHideToggle').click(function() {
var toggle= $(this);
if ($(".test").hasClass("show")) {
toggle.text("Hide");
$(".test").removeClass("show");
}
else {
toggle.text("Show");
$(".test").addClass("show");
}
});
});

Assuming you are actually talking about literal css transitions, toggle a class on and off. If you want it to fade out then display none, you'll need to use a timeout of the length of your animation that sets to display none at the end. There's no way to keyframe with transitions.
$(document).ready(function() {
$('.usr').click(function() {
$(".test").css('display','block').removeClass('hidden');
});
$(".hide").click(function() {
$(".test").addClass('hidden');
setTimeout(function(){
$(".test").css('display','none')}, 500 //Animation Time
)
});
});
--
.test{
opacity:1;
transition:500ms cubic-bezier(0,0,0.58,1);
-webkit-transition:500ms cubic-bezier(0,0,0.58,1);
}
.hidden{
opacity:0;
}

Can I use jquery to on image hover fade on load text to new text dependent on each image

I have 6 images that when hovered on I would like there corresponding text to fadeIn in the same position one overtaking the other on each image hover.
I am able to show/hide on hover but I am unable to get each element to remove when a new image is hovered.
I have been working on a fiddle here http://jsfiddle.net/PvVg9/
I am new to jquery and the help would really be appreciated.
$('.trigger').hover(function() {
$('.hide').fadeOut(function() {
$('.panel').fadeIn();
});
});
$('.trigger-two').hover(function() {
$('.hide').fadeOut(function() {
$('.panel-two').fadeIn();
});
});

No need for jQuery if you are happy to use CSS3:
JSFIDDLE
HTML
<div class="trigger">Image 1<div class="panel">SHOW ME 1</div></div>
<div class="trigger">Image 2<div class="panel">SHOW ME 2</div></div>
<div class="trigger">Image 3<div class="panel">SHOW ME 3</div></div>
<div class="trigger">Image 4<div class="panel">SHOW ME 4</div></div>
<div class="trigger">Image 5<div class="panel">SHOW ME 5</div></div>
<div class="trigger">Image 6<div class="panel">SHOW ME 6</div></div>
CSS
.panel,
.trigger {
width: 100px;
height: 20px;
margin: 2px;
}
.trigger {
position: relative;
background: grey;
border: 1px solid black;
}
.panel {
position: absolute;
left: 100%;
top: -3px;
background-color: red;
border: 1px solid darkred;
visibility:hidden;
opacity: 0;
transition: visibility 0.1s linear 0.5s,opacity 0.5s linear;
}
.trigger:hover .panel {
visibility:visible;
opacity:1;
transition-delay:0s;
}
Or if you want them one on top of the other then: JSFIDDLE

I do not understand what you want, I guess a tooltip JQuery plug may fit your need.
Check this tool.
I also update your example, you can have a look at it jsfiddle.net/PvVg9/154/

jQuery addClass after / Before

<div id="box"></div>
<div class="text"></div>?
$(document).ready(function () {
$('#box').click(function () {
$('.text').slideToggle('slow');
});
});
#box{
height:40px;
width:100px;
background:red;
}
#box:hover{background:blue;}
#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
#box:hover:after{
border-top-color: blue;
}
.text{
display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}
http://jsfiddle.net/zfQvD/16/
Is that possible to use jQuery to add the styled after arrow?
when text class is closed, remove after arrow class
if text class is shown, then add the arrow?
I tried, but seems doesn't work

As per #elclanrs comment, you can't add pseudo elements with JS. What you can do, however, is declare them in your CSS to be only shown when a parent element has a specific class, and then toggle this class with JS, like this:
#box.expanded:after {
content:'';
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
You also have to add a line to your JS for this class to be added upon clicking the box:
$('#box').click(function () {
$(this).toggleClass('expanded');
$('.text').slideToggle('slow');
});
See the example here: http://jsfiddle.net/zfQvD/17/

Width absorbing HTML elements

Im trying to think how to do this with html elements.
There is nothing special about the colors, so I don't need to make them images.
Do note that the text is right aligned. Also, the color bar goes up to the text from the left.
So this could be implemented by having the text float right with background color white, and a div with the background color set right next to it (and then a clear).
Or instead of floats, I can do text align-right and get a similar effect.
Here is the kicker.
I'm using a javascript library (shouldn't matter which one) to create an animation. The animation is the bars shrink to the left, and end up like so:
The problem with the float or text-align methods are that too many values have to be changed to transition between the two states. The javascript animation effects tend to want to change a couple predefined values, like width or font-size. In order to transfer from picture 1 to picture 2 using the float or text-align methods, I must remove the floating/text-align then set the width of the bar color, but that doesn't work if I want to keep the javascript overhead minimal for such a simple task.
I've tried absolute positioning/widths, but I can't get anything to make the text right aligned AND have the bars meet at the same point on the left.
I'm hoping maybe I'm just blind of a simple solution, but as I see it, I need one element that has the text positioned to the right somehow, and an element that takes up as much room possible beside it for the color... AND the element that has the color should be able to take a width, while having the text follow beside it.
Thank you.

Here's my attempt. Note: to the horror of some anti-table zealots this does use tables. Floats just can't do "take up all available space" like tables can.
<html>
<head>
<style type="text/css">
table { width: 300px; background: #DDD; empty-cells: show; }
th { padding-left: 8px; width: 100%; height: 1em; }
td { padding-left: 12px; width: auto; }
div { white-space: nowrap; }
#row1 th { background: red; }
#row2 th { background: blue; }
#row3 th { background: green; }
#row4 th { background: yellow; }
#row5 th { background: pink; }
#row6 th { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("th").animate({ width: 0 }, 2000);
});
});
</script>
</head>
<body>
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table>
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table>
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table>
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table>
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table>
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table>
</body>
</html>
I thought of a non-tables way of doing it that works pretty well, so here it is:
<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>

This is tested and it works perfectly (no stupid tables and very simple CSS/jQuery):
<style type="text/css">
.crazy_slider { display:block; height:25px; width:500px; clear:both; position:relative; z-index:0; text-decoration:none; }
.crazy_slider_text { position:absolute; right:0px; top:0px; height:100%; background-color:white; color:#666; font-size:1em; display:block; text-align:left; z-index:1px; padding-left:10px; }
#red { background-color:red; }
#blue { background-color:blue; }
#green { background-color:green; }
#yellow { background-color:yellow; }
#pink { background-color:pink; }
#grey { background-color:grey; }
</style>
<script type="text/javascript">
$(function() {
$('.crazy_slider').hover(
function() {
var bar_width = $(this).width();
var $crazy_slider_text = $(this).children('.crazy_slider_text');
if($crazy_slider_text.data('original_width') == null || $crazy_slider_text.data('original_width') == undefined || !$crazy_slider_text.data('original_width')) {
var original_width = $crazy_slider_text.width();
$crazy_slider_text.data('original_width',original_width);
}
$crazy_slider_text.stop().animate({width:95+'%'},500);
},
function() {
var $crazy_slider_text = $(this).children('.crazy_slider_text');
var text_width = $crazy_slider_text.data('original_width');
$crazy_slider_text.stop().animate({width:text_width+"px"},500);
}
);
});
</script>
<div class="crazy_slider_text">FOO</div>
<div class="crazy_slider_text">BAR</div>
<div class="crazy_slider_text">BAZ</div>
<div class="crazy_slider_text">FOOBAR</div>
<div class="crazy_slider_text">FOOBARBAZ</div>
<div class="crazy_slider_text">BAZAGAIN</div>
Edit:
I was assuming you were tying to make some kind of navigation elements with these so I added the mouse interaction logic. In any case, it might be useful, haha?
Second Edit:
I've changed the code to be more efficient and more predictable... if anyone cares. ;)

Do the coloured bars need to be a particular width, or just fill the space between the words on the right and the origin on the left? Assuming that my assumption's correct:
<style>
#container {width: 50%;
margin: 0 auto;
}
span {width: 100%;
display: block;
text-align: right;
margin: 0.2em 0;
}
span p {text-align: right;
background-color: #fff;
color: #333;
display: inline-block;
padding: 0 0 0 0.4em;
line-height: 1.4em;
font-weight: bold;
}
span#foo {background-color: #f00;
}
span#bar {background-color: #0f0;
}
span#foobar {background-color: #00f;
}
</style>
<div id="container">
<span id="foo">
<p>foo</p>
</span>
<span id="bar">
<p>bar</p>
</span>
<span id="foobar">
<p>foobar</p>
</span>
</div>
Working demo: http://davidrhysthomas.co.uk/so/colouredfoobars.html