CSS only Tool tip Need - html

I have tried to make a tooltip appear using CSS only. I have a solution; however I need another structure in my HTML, and remove the current use of a wrapper div.
This is my current HTML with a wrapper, that makes the div with class tooltip appear:
<div class="wrapper">
<img src="1.png"></img>
<div class="tooltip">
<span>1. A small tooltip.</span>
</div>
</div>
And the following css is what displays the tooltip:
.wrapper:hover > .tooltip {
display:block;
}
Here is my code describing the problem; http://jsfiddle.net/5p3teu5b/15/.
How do I make the div .tooltip appear without the wrapper div?

You can use another selector than "child of", see the fiddle for an example. If you want the sibling to the image to display when hovering, you can use the + selector, described at W3 Selectors.
so your HTML will look like this, notice the extra class on the img tag.
<div>
<img class="sibling" src="1.png"></img>
<div class="tooltip">
<span>Lorem Ipsum</span>
</div>
</div>
with the following css
.sibling:hover + .tooltip {
display:block;
}
.tooltip{
display: none;
}
This will make the div with class tooltip appear when you hover an image with class sibling, but only if it appears directly after it. If you want all siblings with the class .tooltip to appear when hovering any image, you can use img:hover + .tooltip as a selector instead.

Related

Div link and hover does not work

I am building new website and I've run into a little problem.
When I added next to my div and after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.
Here is HTML code:
<div id="centerbox">
<div class="profile"></div>
<a style="display:block" href="about.php"><div class="about"></div></a>
</div>
</div>
And here is CSS Code
#centerbox {
width:988px;
height:462px;
margin-top:8.7%;
margin-right:auto;
margin-left:auto;
}
.about {
width: 150px;
height: 150px;
display: block;
margin-left:15.8%;
margin-top:-150px;
background:url(/images/about1.png);
background-repeat:no-repeat;
}
This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.
When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.
If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.
See this post for further clarification
Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)
I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">
You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class

How to hide/display an anonymous div without affect other divs

I want to hide an anonymous-child div which has a child-div also. I want also to display the anonymous div by clicking on div#child2.
I don't have any authority to change/add/remove ids or classes.
So I did this:
<div id="parent">
<!-- the anonymous div which I want to hide and display by clicking on div#child-2 -->
<div>
<div id="Container1" >
<div id="Container1">
<object>.....</object>
</div>
</div>
</div>
<div onclick="appear()" id="child-2">
<div id="child-of-child"></div>
</div>
</div>
CSS
div#parent div:first-child {
display: none;
}
Javascript
<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block !important";
}
</script>
The problem is that this type of css has affected the div#child-of-child and div#Container1 because the css reffering to every first child of any div.
So, my first question is:
How can I hide the anonymous div without having any effect to another div and display that later by clicking on div#child-2.
Second:
In this type of javascript code the styling of "block !important" works as it is?
Third:
The div#child2 doesn't have any content by itself. It includes another div which has content. If I set on div#child2 an event like onclick="appear()"; it works?
Forth:
In case that there is no way to avoid any effect to other divs is there any way to display the anonymous div and div#Container1?
Try this to only hide the first child within the #parent div:
div#parent div:first-child div:first-child {
display: none;
}
EDIT
To make Container1 appear afterwards, do the following in js (notice: I removed `!important' as I don't believe that is allowed, removing it made the code work - you can try it out below through the Fiddle link):
function appear() {
document.getElementById("Container1").style.display="block";
}
FIDDLER

How to change only one element of a class without giving it an ID?

My question:
Is it possibile to ONLY change one element of a class without (a) giving it an own ID and (b) without doing inline-style in the HTML document?
Why do I want to do that?
I am using a software where the program creates classes and ids by itself (for a questionnaire). I cannot change or add classes/ids nor can I change the html. The only thing I can do is grab those already defined classes with CSS and style them (which is what I want to do).
Example:
JSFiddle: http://jsfiddle.net/nyGWc/
In this example I only want to change the background-color of the second ".class2" to green (whereas the first ".class2" div should remain red).
<div class="class0">
<div class="class1">
<div class="class2">
This div has a red background color.
</div>
</div>
</div>
<div class="class0">
<div class="class1">
<div class="class2">
This div should be green without adding an ID to it.
</div>
</div>
</div>
CSS:
.class1 {
height: 3em;
}
.class2 {
background-color: red;
}
What I've tried so far:
I've tried to use :nth-child(2) and :nth-of-type(2) but as far as I've understood it, it only selects the target child under a parent element? In my example the div elements with the class ".class2" are not siblings. So those won't work.
Thanks a lot!
As you rightly said, since the class2 elements are not siblings, you cannot use nth-child. So the solution to your problem is using nth-child for class0. Here is the code
.class0:nth-child(2) .class2{
background-color: green;
}
FIDDLE
Select the second class0, then select its child class2. Using nth-of-type allows the .class0 elements to not need to be under the same parent element.
.class0:nth-of-type(2) .class2 {
background-color: green;
}
Fiddle

Want to change the background of an div on hovering another div in css3

I Want to change the background of a Div when Hovering over another Div and i tried
HTML5 part:
<nav>
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="nav5"></div>
<div id="nav6"></div>
<div id="nav7"></div>
</nav>
<article>
<div id="nav8"></div>
</article>
And the CSS i tried is
#nav2
{
float:left;
height:429px;
width:34px;
background:url(images/nav_02.gif) no-repeat;
}
#nav2:hover #nav8
{
float:left;
height:429px;
width:445px;
background:url(images/nav_08-nav_02_over.jpg) no-repeat;
}
But it is not working ...
I need to do it with css only no javascript ..
The way CSS selectors works is Parent > Descendant
When you do
#nav2:hover #nav8
It means that #nav8 is a descendant of #nav2, which is not the case in your markup, so the rule does not apply
You have to use javascript to do what you're after.
It's impossibru. You can change the background of the div itself, and any child divs, when you are hovering it, but with a sibling/parent sibling/completely unrelated element - no way.
You could, however, do it in jQuery.
Example:
$("#nav2").mouseover(function() {
$("#nav8").addClass("someClassName");
});
$("#nav2").mouseout(function() {
$("#nav8").removeClass("someClassName");
});
And then hook up that background-image to #nav8.someClassName.
Use this Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("#nav2").hover(function(){
$("#nav8").css("background-image","url(images/nav_08-nav_02_over.jpg)");
},function(){
$("#nav8").css("background-image","");
});
});
</script>
There is no way you can add effects on same level tags in CSS3. On hover of a parent tag only child tags can have different CSS.
it's impossible unless your div are siblings, so you can achieve the effect using
+ adjacent siblings selectors (css2) or
~ general siblings combinator (css3)
e.g. if your markup is structured in this way
<div id="nav1"></div>
<div id="nav2"></div>
...
<div id="nav9"></div>
you can apply some style to nav2 hovering nav1 with
#nav1:hover + #nav2 { ... }
because nav2 is an immediate (adjacent) sibling of nav1 (in this case + or ~ would have the same effect), or you can do the same on nav9 hovering nav1 with
#nav1:hover ~ #nav9 { ... }
(here you can use only the ~ selector.)
Note also that these selectors are available on all modern browser including Internet Explorer 7+, see http://html5please.us/#gtie6

Set CSS of an span tag on sibling hover

Hey does anyone know how I would accomplsh this with pure css.
<a id="link"><span>Some Text</span></a>
<div id="someDiv"></div>
Make the spans "Some Text" a certain color when someDiv is moused over.
Not sure if this is possible. Thank.
Due to the way CSS selectors work, there's no previous sibling selector. So with your existing markup you can't use pure CSS to do it.
If the link were to come after the div, however:
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
The selector to use would be #someDiv:hover + #link span.
This might be possible if you have a parent element to associate the css hover class with. For example:-
<div id="parent">
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
</div>
& den use the following css.
#link
{
position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/
/*You can position this anchor tag wherever you want then */
}
#parent:hover > link > span
{
color:#000;
/*enter code here/*
}
Pure css? Working in all browsers? Not possible in this structure.
I think this should work, assuming these two elements share the same parent and a#link is the first child of that parent element.
#parent div#someDiv:hover ~ a#link:first-child span {
color: blue;
}
IE6 doesn't support it, but if you can live without IE6 (and you really should, IMO), you should be okay.