I'm trying to make a double rollover link.
When rolling over 'foto'; I'd like to make 'fotografie' appear and 'grafisch' disappear (same thing: when rolling over grafisch, 'foto' to disappear). I've found that it'd be easiest with opactiy, but I can't seem to figure out the code.
Any help highly appreciated.
HTML
<a class="fotografie" href="URL">
<div class="foto">foto</div>
<div class="fotografieh">fotografie</div>
</a><a class="grafischontwerp" href="URL2">
<div class="grafisch">grafisch</div>
<div class="grafischontwerph">grafisch ontwerp</div>
</a>
CSS
.masterplan .fotografie {color: #ff6666;}
.masterplan .fotografie .fotografieh { display: none; }
.masterplan .fotografie:hover .foto { display: none; }
.masterplan .fotografie:hover .fotografieh { display: inline;}
.masterplan .grafischontwerp {color: #33cccc; }
.masterplan .grafischontwerp .grafischontwerph { display: none; }
.masterplan .grafischontwerp:hover .grafisch { display: none; }
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;}
Seeing no easy answer using just CSS, I'd like to suggest adding simple few lines of jQuery:
$(document).ready(function() {
$(".foto").hover( function() { // Assign 'hover' action to all elements with 'foto' class
$(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class
});
$(".grafisch").hover( function() {
$(".foto").toggle();
});
/* insert other jQuery code, if any */
...
});
I hope that helps, IF you're using jQuery.
EDIT:
Michael, I suspected that you may not be familiar with JavaScript/jQuery. There are tons of examples and tutorials on the web you can easily find. Also, be sure to search StackOverflow as well.
If you expect to continue to work with html and css at all, I'd suggest learning at least the basic concept behind JavaScript and jQuery, which is one of the most widely used JavaScript framework/libraries.
To get you started, check out the following links:
Setting up jQuery
How jQuery Works
Notice that I also added some comments to the code I wrote earlier. Let me know if you have any other questions on this topic.
Check out this demo --> DEMO
Related
This is the html of what I want to hide
<div class="count">
<div class="number">1</div>
<div class="text">donation</div>
</div>
I've tried to use the CSS code:
.count {
display: none;
}
As well as:
body.page-id-750 div.count {
display: none;
}
For ref the body is:
<body itemtype="https://schema.org/WebPage" itemscope="itemscope" class="page-template-default page page-id-750 logged-in admin-bar wp-custom-logo ast-single-post ast-mobile-inherit-site-logo ast-inherit-site-logo-transparent ast-theme-transparent-header ast-hfb-header ast-page-builder-template ast-no-sidebar astra-3.9.2 elementor-default elementor-kit-442 elementor-page elementor-page-750 customize-support e--ua-blink e--ua-chrome e--ua-webkit ast-mouse-clicked ast-header-break-point"
Try with
.count {
display: none!important;
}
body.page-id-750 div.count {
display: none!important;
}
I looked add you website code and the problem is that you are loading a widget thats an iframe.
In basic an iframe is an element to show an other website inside your website. Your website doesn't control the iframe content.
Now the strange part is if i look add the iframe you are loading it with code from your own website? So the solution would be adding the css to your widget or iframe.
Is there a widget or plugin you are using?
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
I can't seem to find a solution that works online so I thought I would ask on here. So, I want to have my page menu to display my logo when I hover over it. I don't mind using javascript or just plain HTML and CSS. Any help would be appreciated.
<li>Home</li>
<li>Contact</li>
<li>Refrences</li>
Without your code I cant give you a specific answer but you can do this pretty easily with CSS selector :hover. You can see how that works in this fiddle here: https://jsfiddle.net/8xxtLega/1/
If you dont want the image to take up then you can use the display property instead of opacity to hide your image. Like so:
img {
display: none;
}
div:hover img {
display: block;
}
The div in this instance could be your entire menu or some other kind of container. This would achieve the method you are looking for of making your image appear when you hover over your menu.
I reccomend you use opacity or display: hidden; instead of display: none; so that it doesnt change your layout when the image appears.
Here is an example solution using JQuery to replace a menu link with a logo image on hover, and when the mouse leaves the image the link is replaced. I'm sure there's better ways, but this was a quick thought after reading your last comments and edits. Hope that helps.
// Requires JQuery
$(document).ready(function() {
$('#home').hover(
function () {
$('#home').html('<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" style="width:30px; height:20px;">');
},
function () {
$('#home').html('Home');
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
padding: 30px;
}
</style>
</head>
<body>
<div>
<ul>
<li id="home">Home</li>
<li>Contact</li>
<li>Refrences</li>
</ul>
</div>
</body>
</html>
I have a problem with my web. When I set css for #responzivniMenu (display: none;) It's still displaying and might not change. I don't know where does the problem come from.
[SOLVED] It was problem with hosting! Check my answer post if you are interested what exactly was the problem.
My HTML:
<div id="responzivniMenu">
<div id="skautLogoResponzivni"></div>
<div class="responzivDrop">
<button onclick="responziv()" class="responzivBtn"></button>
<div id="responzivni" class="responzivni-content">
Domů
Historie
Aktuality
Vedoucí
Kontakt
Oddíly
</div>
</div>
<script>
function responziv() {
document.getElementById("responzivni").classList.toggle("resshow");
}
window.onclick = function(event) {
if (!event.target.matches('.responzivBtn')) {
var dropdowns = document.getElementsByClassName("responzivni-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('resshow')) {
openDropdown.classList.remove('resshow');
}
}
}
}
</script>
</div>
And CSS:
#responzivniMenu {
display: none;
}
your css style is overrided by another css rule,try adding !important after display:none.
#responzivniMenu {
display: none!important;
}
check your css file. it may contain a specific css for your #responzivniMenu that override yours
In your html i didn't saw where you are linking your css to the page.
If your css it's on the same page than your html but not in a separated page, so you must use "style" tag an your code will be
<style>
#responzivniMenu
{
display:none !important;
}
</style>
Sorry guys for this post, my hosting just has a long delay between uploading the file and changing it on the server for some reason. It's about one hour. Thanks for all your replies and I apologize for wasting your time!
I would like to change the background color of the jquery mobile 1.4.5 pages. I have google around and found what some people suggest as the correct css overrides to do this. However, nothing works for me.
My CSS overrides are the last CSS file loaded in my app so I would expect that the below classes override the jqm css but they don't.
Does anybody know the correct way to do it?
Here is the JSfiddle
UPDATE:
See updated fiddle.
CSS:
.ui-page {
background:#296BC1;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper
.ui-content {
background:#296BC1;
}
This worked for me
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background-color: #FFF !important;
}
This code should work:
.ui-page{
background-color: #faaaff !important;
}
Try this
div[data-role=page][data-theme=a] {
background:#fff;
}