I read that you could make some easy CSS Tooltips with a Span, so I tried it, but it wont work for me and i have troubles figuring out why:
if($result = $mysqli->query($query)) {
while($obj = $result->fetch_object()) {
$image = $obj->Image;
$page = $obj->Page;
$name = $obj->Name;
if($image != null) {
echo "<a href=" . $page . " target=_parent><img src=" . $image . " width=93 height=66><span class=info>test</span></img></a> ";
}
}
}
and the CSS:
<style type="text/css">
body,td,th {
font-family: "Myriad Pro";
font-size: 12px;
background-color:#fcfcfc;;
}
a {
border:none;
}
img {
border:thin solid;
border-color:CCC
}
img:hover {
opacity:0.5;
}
span.info {
display:none;
}
img:hover span.info {
display:block;position:absolute; width:200px; height:200px;
}
</style>
My Problem is that the Span wont show at all.
Anybody some ideas how to fix this?
The selector you're looking for is this:
img:hover + span.info {
display:block;position:absolute; width:200px; height:200px;
}
The + is for adjacent elements. Using a space is for descendant elements (and span is most definitely not a descendant of img).
I don't think that making it a hover event on the image tag will work as the span tag isn't a child of the image tag.
Image tags do not have a closing image tag like you have written in your code.
They can be closed by simply putting a slash at the end e.g.
<img src="" />
If you make it an event for the 'a' tag that should work e.g.
a:hover span.info {
// your css here
}
You need to do two things:
change "img:hover span.info" to "a:hover span.info", as the span is the child of the a tag, not the img tag
apply a positioning to the a tag (position:absolute will only be relative to the parent when the parent has position explicitly stated)
While the + selector mentioned above will indeed work on CSS3-enabled browsers, this will work on all browsers (IE8 and below).
You can't nest anything inside an IMG tag as far as i'm aware (which is prob why it's not showing up) - do something like this:
CSS:
.tippedImage {
position: relative
}
.tippedImage span {
display: none;
position: absolute;
}
.tippedImage:hover span {
display: block
}
HTML:
<span class="tippedImage">
<img src="someimage.gif" />
<span class="tooltip">Tool tip text</span>
</span>
Related
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
Is it possible to change the value of a <p> after hovering over an <h1> only using CSS?
When the user hovers over a heading, I want the color value of a <p> element to change accordingly. I'd like to achieve this using only CSS.
Yes You can. Here is an example.
#a:hover ~ #b {
background: #ccc;
}
<h1 id="a">Heading</h1>
<p id="b">random Text</p>
But element with id b must be after a.
Hope that was Helpful!
if the h1 directly precedes the <p> tag, you could do something like:
h1:hover + p { color:red; }
Note that IE needs a <!doctype> before it will honor hover on elements other than <a>, and the + selector does not work in IE 6
It is possible, but requires a sort of "hack". My advice would be to go with JavaScript, JQuery for this action, much easier.
I'm reading this question as changing the actual value inside the <p> element. If that's the case here is how it can be done.
Fiddle: https://jsfiddle.net/fc3rhgow/1/
HTML:
<h1 id="myH1">this is the h1</h1>
<p id="myP">this is the p</p>
JavaScript:
var h1 = document.getElementById("myH1");
var myP = document.getElementById("myP");
h1.addEventListener("mouseover", mouseOver);
function mouseOver(){
myP.innerHTML = "new value";
}
Perhaps this decision will suit you. Good luck.
h1:hover + p:before{
content:'Ohhh hover h1';
}
h1 + p:before{
content:'h1 no hover ';
}
<h1>Header H1</h1>
<p></p>
Depending on what you mean by 'value', and what your HTML looks likes (ie, which p element you wish to modify) you can do something like...
h1:hover p
{
color: red;
font-size: 2em;
}
OR maybe this?
h1:hover ~ p
{
color: red;
font-size: 2em;
}
OR this perhaps?
div h1:hover p
{
color: red;
font-size: 2em;
}
OR maybe even this?
h1:hover > div p
{
color: red;
font-size: 2em;
}
Whatever you need to to target mate...
NB: As far as I know, we can't target parent selectors :-(
I have the following HTML and CSS code:
HTML:
<img src="image.jpg" />
CSS:
a:hover {
border-bottom:1px solid #000;
}
The issue is, that the a-Tag should add the border when hovering only if the enclosed link is NOT an image.
The border is not on the image, it is on the a-Tag...How can I solve this?
Is there a solution for this?
a img, a img:hover { border:none; }
if you have only one a-tag that has an image, you can use an id
#myImageATag, #myImageATag:hover{
border:none;
}
<a id="myImageATag"></a>
If you wan to apply to many others, you can use a class
.linksWithImages, .linksWithImages:hover{
border:none;
}
I don't know if you can use Jquery but this is a solution to check if there is an image then remove the border. How to check if the a tag has an image below in jQuery
$('a').each(function() {
if ($(this).find('img').length === 0) {
$(this).css("border", "none");
}
});
CSS cannot do this , but Jquery can easily help you :
$(document).ready(function(){
$("img").parent("a").css( "border-bottom" , "none" );
});
test it here : http://codepen.io/anon/pen/zGZbVj
use following CSS for anchor image link:
a img { border: none; }
a:hover img { border: none; }
So here's what Im looking to do in its most simplified form. I want to have a box appear on the page and when you hover over it, it's contents are visible, otherwise they are hidden. So for example let's say we have this:
<style type="text/css">
#box {
background-color:red;
width:100px;
height:100px;
}
</style>
<div id="box">
<img src="smileyface.png" />
</div>
Most of the time, the image is hidden and this looks like a red box, but when the div is hovered over the image appears. Is there any way to do this with CSS and not javascript. I know with javascript we could just remove the element and add it back in as we go, but I just want to show it and hide it. Thoughts?
*Must be IE 8 compliant because I'm a glutton for punishment.*
This is quite easy. Just change the display property of the image when the #box is hovered
#box > img {
display: none;
}
#box:hover > img {
display: block;
}
You can use :hover on any tag you'd like to:
#box {
background-color:red;
width:100px;
height:100px;
}
#box:hover {
background-image: src('smileyface.png');
}
I'm having some difficulty with this example:
<img src="image1/<?php echo $file; ?>.jpg" style="width:500px" />
<p id="caption"><?php echo $caption; ?></p>
I'm trying to get the caption with CSS when hovering the image.
I tried to use a img{hover;} and p {hover;}.
Is there a way for me to get the caption when hovering the image? The example is in PHP and if it was in CSS or Javascript maybe I could search for it, but so far I can't find a solution for this.
I appreciate any explanation & examples.
/* by default, hide caption: */
#caption { display: none; }
/* if caption is next to a hovered img, show: */
img:hover + #caption { display: block; }
jsFiddle Demo
+ is the Adjacent Sibling Selector, supported from IE8.
:hover pseudoclass is used to style elements the mouse goes over
Note that if you want to use more than one caption in your document, you should use a class instead of an id. Ids must be unique in the document.
If you need something that works in IE7, consider HTML like this:
<div class="image-with-caption">
<img src="whatever.png" style="width:200px" />
<p class="caption">caption</p>
</div>
And the CSS would be:
.caption { display: none; }
.image-with-caption:hover .caption { display: block; }
jsFiddle Demo
To affect the style of the p while hovering over the img:
img:hover + #caption {
display: block; /* or whatever...*/
}
Or:
img:hover ~ #caption {
display: block; /* or whatever... */
}
It's worth noting that these examples assume that you have only one p element with an id of 'caption,' if you have multiple p elements with that id, then you need to use a class instead, as an id must be unique within the document.
The + is the CSS adjacent-sibling combinator, and selects the #caption that immediately follows the img over which the user is hovering.
The ~ is the CSS general-sibling combinator, and selects any sibling #caption element that is a later-sibling of the img which is hovered; regardless of any elements that might appear in between (though they do have to be siblings within the same parent element).
Reference:
CSS selectors, at the W3.org.
You want img:hover {/* css */}
Actually, you probably want to do something like this:
<div class="hoverme">
<img src="image1/<?php echo $file; ?>.jpg" style="width:500px" />
<span><?php echo $caption; ?></span>
</div>
and then in your CSS:
div.hoverme span{
display: none;
}
div.hoverme:hover span{
display: block;
}
Try using JavaScript events onMouseOver and onMouseOut to show/hide the caption, something like this:
<img src="image.jpg" style="width:500px"
onMouseOver="document.getElementById('caption').style.display='block'"
onMouseOut="document.getElementById('caption').style.display='none'" />
<p id="caption" style="display:none">Caption here</p>