HTML (example):
<img src="" id="img-test" />
So I want to hide only anchor not img:
#media print
{
#href-test-anchor
{
display: none !important;
}
}
This code hide and img tag, is there away to do it?
Use visibility instead:
a {
border:5px solid red; /* You will not see this */
visibility:hidden;
}
img {
visibility:visible;
}
<img src="https://picsum.photos/id/10/200/200" id="img-test" />
(EDIT: because it got deleted)
Use visibility instead.
#href-test-anchor
{
visibility: hidden;
}
#href-test-anchor img
{
visibility: visible;
}
Doesn't really make sense as to why you are using an anchor, as you are not hyperlinking any text. You could use a div as an alternative; but this does work with an anchor.
Related
Here is my problem: I want to make a thing, where when you hover over one object, it disappears, but another object appears. I tried this for my code:
h1.title:hover + .ps{
visibility: visible;
}
h1.title:hover !important{
visibility: hidden !important;
}
.ps{
visibility: hidden;
}
i guess you want smth like this :
jsfiddle
IMPORTANT : h1.title:hover !important{ this is not correct , the !important must be inside the {} and after the css properties for example opacity:1!important
code added
PS i used opacity instead of visibility...but you can change it if you want
html :
<div class="container">
<h1>TITLE</h1>
<p>Other text</p>
</div>
css :
.container {
position:relative;
}
h1 {
font-size:40px;
color:red;
line-height:48px;
margin:0;
transition:0.3s;
}
.container p {
position:absolute;
top:0;
font-size:35px;
line-height:40px;
color:blue;
margin:0;
transition:0.3s;
opacity:0;
z-index:-1;
}
.container h1:hover {
opacity:0;
}
.container h1:hover + p {
opacity:1;
}
to see differences between opacity and visibility read here
the fact is that if you use opacity the object disappears ( fades out ) but it's still there ( occupies space ) and if you have another object in the same place you can access it.
but in the case of visibility , it does the same exact thing as opacity but you can't access the element behind it.
in your case, the h1 title is the one triggering the hover effect and so...even though you hide it, you still need to be able to ' touch ' it, that's why you need opacity. and that's why if you use visibility the effect will not be so nice
BUT
if you want to use visibility , remove the transition , because visibility has a binary setting (visible/hidden) not a **calculable ** property (1,0) , and so transition doesn't work with visibility
and then use this code :
.container p {
visibility:hidden;
}
.container:hover h1 {
visibility:hidden;
}
.container:hover h1+p {
visibility:visible;
}
Here is the logic to achieve what you want.
div {
display: none;
}
a:hover + div {
display: block;
}
a:hover {
display: none;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
You have to use javacript (it's best to use jquery – it just makes things simpler).
$("p.show").hide();
function hide() {
$("p.show").show();
$("p.hide").hide();
}
p.show {
visibility: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class='hide' onmouseover='hide()'>Hover on me</p>
<p class='show'>Done!</p>
I've built a site with TYPO3 (4.7.2) which has a nice graphical menu on the right hand side (see here). But this is not so user-friendly nor is it easy to maintain, as it is a bit of a hack and doesn't use "Typo3-Standards", but just some general HTML/CSS-hacking:
the menu's html is:
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="/fileadmin/images/baehr_katalog2.png" />
</a>
</p>
and the corresponding CSS:
#kat a {
background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat;
display:block; height:120px; width:220px; /* Linkbereich begrenzen */
}
#kat img {
display:block; width:220px; height:120px; border:0;
}
#kat a:hover img {
visibility: hidden;
}
So basically I show the image with white font in "standard mode" and when the mouse hovers, that image is hidden and the same image (with black font) in the background becomes visible. I thought this was quite nice, and it did not need any JS :-)
But I'm wondering if there is a way to do this more elegant, robust and user-friendly (perhaps with TYPO's tools?), so that the user could change images if needed without having to worry about CSS...
edit: I found a solution requiring one image! (Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
But still I wonder if there's not a more TYPO-esque solution around? ;-)
If you don't use text links (only image) you are able to switch properties like this:
#kat a {
text-decoration: none;
display: block;
width: 220px;
}
#kat a img {
border: 0;
max-width: 100%;
height: auto;
display: block;
opacity: .5;
}
#kat a:hover img {
opacity: 1;
transition: opacity 1s ease 0s;
}
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="http://lorempixel.com/440/220"/>
</a>
</p>
As edited in the q, I found a solution:
Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
(In order to avoid issues created by non-CI fonts and to maintain good looks etc., I prefer captions as part of img vs. CSS-styled text.)
I'm trying to make a pure CSS image change on hover / rollover without using background images. So far I have one image and when you rollover that image, another image appears. Here is the CSS:
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
So, when you rollover the #visible div, the #hidden div appears. Here is the jsFiddle: http://jsfiddle.net/MNyzd/1/
This works great, but it is not exactly what I want to accomplish. I would like the images to swap. So when you rollover #visible, it should disappear instead of remaining visible. My first initial idea was to make the #visible div to display:none on hover (#visible:hover display:none;), but this did not work.
So does anyone have any idea how I would successfully turn this into a traditional image hover / swap using this method? Any help would be appreciated and again, here is the jsFiddle... http://jsfiddle.net/MNyzd/1/
Use a container where you do the hover on:
http://jsfiddle.net/MNyzd/8/
.hidden {
display: none;
}
.container:hover .visible
{
display: none;
}
.container:hover .hidden {
display: block;
}
See also this answer: Hide / show content via CSS:hover (or JS if need be)
Like this?
jsFiddle
div {
cursor:pointer;
overflow:hidden;
width:300px;
}
div > img:nth-child(2), div:hover > img:nth-child(1) {
display:none;
}
div:hover > img:nth-child(2) {
display:block;
}
http://jsfiddle.net/MNyzd/4/
EDIT: The code:
#hidden {
display: none;
position: absolute;
top: 8px;
left: 8px;
}
#visible:hover + #hidden {
display: block;
}
#hidden, #visible {
width:300px;
height:300px;
}
<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>
I found this useful html as answer to a question about rollover image to text by renocor (rollover a text hyperlink to become an image)
<style>
.changeable img
{
display:none;
}
.changeable:hover span
{
display:none;
}
.changeable:hover img
{
display:inline-block;
}
</style>
<span>Hyper Text</span><img src="img.png" />
but i needed to achieve the opposite effect. So i inverted span with image it partially works. Meaning that instead of the image i see the text but the problem is that the image doesn't disappear but shifts just below the text.
Any suggestions?
Thanks
.changeable span
{
display: none;
}
.changeable:hover image
{
display: none;
}
.changeable:hover span
{
display: inline-block;
}
</style>
<span>Hyper Text</span><img src="img.png" />
Check the <style> and put img instead of image, worked for me.
.changeable:hover img
{
display: none;
}
Hey I have a little problem and i can't solve it.
Here is the CSS:
.error {
float: left;
color: #F00;
visibility: hidden;
display: inline;
}
.validieren:required:invalid + .error {
visibility: visible;
}
.right {
float: left;
color: #0F0;
visibility: hidden;
display: inline;
}
.validieren:required:valid + .right {
visibility: visible;
}
And here is the HTML Code:
<img src="haken.gif" class="right"> <img src="kreuz.gif" class="error">
The problem is that the second (in this case error) image doesn't appear.
Thanks for your help.
Sorry for my language i'm german.
Try this:
.validieren:required:invalid ~ .error {
visibility: visible;
}
You have both .validieren + .error and .validieren + .right.
.validieren can't be immediately followed (adjacent sibling selector) by both .error and .right.
Changing to the general sibling selector should make it work. I'm assuming that the .validieren element comes before (and shares the same parent as) both the images.
The problem is, your error class contains an attribute (specifically visibility: hidden) that forces your image (or element) to not display.
You have visibility: hidden set for the error class, which is assigned to the second image. What behavior are you expecting?