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;
}

Position the siblings when using scaling with transform property

I am implementing the CSS transform property over a division and have a use case of moving the siblings which are located next to it as per the scaling.
I tried adjusting the positions but did not work and thought this is how the transform functions. I might be wrong so want to give a one more try here.
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
transform: scale(5);
transform-origin:top left;
z-index:0;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
z-index:1 /*Not sure why I had to do this too*/
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>
Please take a look at this playground where the child element is just staying there but I need it to move towards the right
https://codepen.io/frank-underwood/pen/jOOmLJO?editors=1100

.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
transform: scale(5);
transform-origin:top left;
z-index:0;
}
.childA:hover + .childB {
transform: translateX(calc(22rem * 4));
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
z-index:1
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>
I'm not sure how much you're wanting to move it, or where.. Here is code to make it move on the hover of your scaling element. I'm using the adjacent CSS combinator to make this happen. When you're hovering ChildA, the adjacent ChildB can be given a set of properties.
As for why you had to put a z-index on .childB was because transforms create a new stacking context. Even though .childA comes before .childB in your HTML, the transform essentially brings .childA to a new layer. Therefore, you have to set .childB's z-index.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Here's some reading about stacking context. It's really important to understand how these work and what creates new ones.
edit You can calc the translate based off the element your hovering and it will consistently move. I added 2rem to the width because you have 1rem of padding on either side. 22rem * 4 instead of 5 because scale(1) = 22rem.

If you are able to adjust your html structure you can easily do this:
.parent{
display:flex;
}
.leftDiv{
background:yellow
}
.childA{
padding: 1rem;
background: lightblue;
position:relative;
}
.childA:hover {
transform: scale(2);
transform-origin:top left;
z-index:0;
}
.childA:hover .childB {
transform: scale(0.5);
transform-origin:top left;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
position:absolute;
left:100%;
top:0;
bottom:0;
white-space:nowrap;
}
<div class='parent'>
<div class='leftDiv'>I will just stay here</div>
<div class='childA'>Child A scales
<div class='childB'>I want to move when scaled</div>
</div>
</div>

Transform affect like absolute position, so you increase width and with calc method you can set how times it increas;
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
width: calc(20rem * 5);/*here you can change 5*/
transform-origin:top left;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>

Minimal (shortest) HTML for clickable "show-hide" text or spoiler

Yes, there are a zillion questions and pages explaining how to use html, css and (optionally) javascript to create similar things going by the names of:
hints
spoilers
toggles
show/hides
tooltips
But I haven't found an answer to this question:
Is it possible to create CSS to make something similar to this (a snippet of html as tiny as possible) behave as a toggle / spoiler when clicked?
<div class="hint">The answer starts with an A</div>
If it's not possible... That's okay! The question is about whether that's possible -- I just want to know.
I'm already aware of the barebones solution that works when hovered:
<div title="The answer starts with an A. (This is shown when hovered.)">
But the solution has to be clickable because it will be displayed on a phone, where "hovering" doesn't exist.
The CSS can be long, but the html has to be the shortest possible. The reason why the html must be barebones is that I will be typing it manually many times. I don't care whether it's a div or a span or what fields are specified, just as long as it's short.
There cannot be any other html anywhere as part of the solution. That is because in this system I have to type all the html every time, whereas I get the CSS for free.
It doesn't even have to be a real toggle: all I care about is that it starts out hidden and is shown when clicked.
Thanks in advance for your insights!

TL;DR:
Minimal CSS version for custom attribute tooltip (you can choose other name):
[tooltip]:active::after {
content: attr(tooltip);
}
<div tooltip="This is tooltip">some div</div>
More complex solution
You can create rules for custom attribute and add before (for tooltip's arrow) and after (for tooltip's body) pseudo elements.
Default opacity for preudo elements is set to 0. When element with custom attribute is active, set opacity to 1.
(Source: pure css tooltip tutorial)
div{
margin: 0.5em 15em;
}
[tooltip]{
position:relative;
display:inline-block;
}
[tooltip]::before {
content: "";
position: absolute;
top:-6px;
left:50%;
transform: translateX(-50%);
border-width: 4px 6px 0 6px;
border-style: solid;
border-color: rgba(0,0,0,0.7) transparent transparent transparent;
z-index: 99;
opacity:0;
}
[tooltip-position='left']::before{
left:0%;
top:50%;
margin-left:-12px;
transform:translatey(-50%) rotate(-90deg)
}
[tooltip-position='top']::before{
left:50%;
}
[tooltip-position='bottom']::before{
top:100%;
margin-top:8px;
transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
left:100%;
top:50%;
margin-left:1px;
transform:translatey(-50%) rotate(90deg)
}
[tooltip]::after {
content: attr(tooltip);
position: absolute;
left:50%;
top:-6px;
transform: translateX(-50%) translateY(-100%);
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
padding:4px 2px;
font-size: 12px;
min-width: 80px;
pointer-events: none;
padding: 4px 4px;
z-index:99;
opacity:0;
}
[tooltip-position='left']::after{
left:0%;
top:50%;
margin-left:-8px;
transform: translateX(-100%) translateY(-50%);
}
[tooltip-position='top']::after{
left:50%;
}
[tooltip-position='bottom']::after{
top:100%;
margin-top:8px;
transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
left:100%;
top:50%;
margin-left:8px;
transform: translateX(0%) translateY(-50%);
}
[tooltip]:active::after,[tooltip]:active::before {
opacity:1
}
<div tooltip="This is left tooltip" tooltip-position="left">tooltip on left</div>
<div tooltip="This is right tooltip" tooltip-position="right">right tooltip</div>
<div tooltip="This is bottom tooltip" tooltip-position="bottom">bottom tooltip</div>
<div tooltip="This is tooltip">tooltip without position attribute</div>

If you're looking for a spoiler type thing with barely any code this might do it, and is pretty flexible.
.hint {
background-color: #ddd;
display: inline-block; /* you could do this as a full-width block instead */
padding: 8px 12px;
position: relative; /* needed for placeholder positioning */
}
.hint:not(:active) {
background-color: #eee; /* these two colors must be equivalent A */
color: #eee; /* these two colors must be equivalent B */
min-width: 96px; /* 72px if box-sizing is border-box; ensures the placeholder is fully visible if the text is smaller than the placeholder text */
user-select: none; /* if you want it to be copyable, may highlight spoiler text when they click */
}
.hint:not(:active)::before {
position: absolute;
top: 8px;
left: 12px;
content: 'Click\a0to\a0reveal'; /* non-breaking spaces probably necessary */
color: #999;
}
<div class="hint">I am a hint</div>
EDIT: added placeholder

Hover state does not work when applying z-index

The problem is I have 2 divs: one container a link and another a box shaped container. The link has a position:fixed; and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.
HTML
<div id="div-1">
<div class="container"></div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
</div>
CSS
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
an important thing is:
The container is hidden by Jquery, unless I click a certain button.
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem
update
I will try to change the css property "z-index"but only when the the container button is toggled on
so the link will have z-index:-9; but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
$("#div-2 a").css("z-index", -9);
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to z-inedx:99; when the container is toggled off?
Only any other answer for the problem is appreciated.

It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?
the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.
But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.
It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
Solution: Give #div-1 a smaller width.
You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.
All details are commented in the source.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid red;
width: 200px;
/*Enable this and it will block link*/
/*width:100%;*/
height: 290px;
}
.container {
/* This saves you an unnecessary step in jQuery */
display: none;
width: 200px;
height: 290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise
| it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left: 125px;
}
#div-2 a:hover {
background: red;
color: white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display: none;
}
#FLAG:target {
display: block;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want.
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>

Have you tried assigning a z-index to #div-2?
You'll need to assign it a position to be able to give it a z-index. Try this:
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1;
}

I don't know what actually in your code but the js you provide look at the if section you have (##button-f) so we find an error here and do we actually need this line ??like we also don't need the line 'container'.hide() in JS. Now you have to scroll for the 'a' certain height because yous set height for #div-1 which is not hidden. So that's amount of height you have to scroll.
So What I change on your code
1. cut the height of div-1 and place it to .container class. you dont provide the a:hover class so I add that to and remove some unnecessary css you have. If you have any other Question ask me in comment LIVE ON FIDDLE
$(document).ready(function() {
$("#button-f").click(function() {
$(".container").toggle();
});
});
button {
width: 13%;
height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
.container {
height:290px;
display:none;
border: 1px solid red;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
positon:fixed;
float:right;
font-weight: 500;
font-size: 1.09em;
text-align: center;
text-decoration: none;
border-radius: 10px;
}
#div-2 a:hover {
background: black;
color: white;
}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<button id="button-f">
button
</button>
<div id="div-1">
<div class="container">tagasdgasdgasdgas</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href='#'>This is a link</a>
</div>
</body>

Why I can't adjust line to be width 100%

I wan't to set line full width, from text on left side.
If text have one word with 5 letters to be like this:
and if text have 3 words to be like this:
Can someone help me, here is what I tried to solve my problem, but it's not semantic useful
https://jsfiddle.net/xoty99bc/
<h3>
Lorem
</h3><div class"line">
</div>
h3{
display:inline-block;
width:20%;
}
div{
display:inline-block;
height:2px;
width:80%;
background-color:red;
}

You can use Flexbox and :after pseudo element. Or if you dont want to use :after you can do it like this Demo
h3 {
display: flex;
align-items: center;
}
h3:after {
content: '';
flex: 1;
height: 1px;
background: red;
margin-left: 10px;
}
<h3>Lorem ipsum </h3>

Take this as an idea:
https://jsfiddle.net/86hy152p/
h3{
display:inline-block;
background-color:
}
.line {
display:inline-block;
height:2px;
width:80%;
background-color:red;
}
You can adjust the height / position of the red bar later with margin and padding.