I am trying to get a div background image to change when you roll over it as well as change text color. I got the color changing ok, but the bg image isn't. Here's what I got:
In the head:
#menu1 {
background-image: none;
}
<script language="javascript">
function txtroll(x)
{
x.style.color="white";
x.style.background-image="url(images/moragames/logo/moragames_logo_01.png);
}
</script>
In the body:
<div id="menu1" onmouseover="txtroll(this)" onmouseout="txtout(this)">
I cannot seem to get the rollover to add the background image but it changes the font color just fine. Any ideas what I'm doing wrong? Thanks!
Try -
x.style.backgroundImage="url(images/moragames/logo/moragames_logo_01.png)";
instead of -
x.style.background-image="url(images/moragames/logo/moragames_logo_01.png)
The style property of HTMLElement has no property called background-image.
u can do it with simple css too
demo
or with Javascript demo1
css:
#menu1 {
background-image: none;
height:100px;
}
#menu1:hover {
background-image: url('http://placekitten.com/200/100');
}
u can try this:
css:
.hover {
background-image: "url(images/moragames/logo/moragames_logo_01.png)";
}
js:
$('#menu1').on('mouseover', function(){
$(this).addClass('hover');
}).on('mouseout', function() {
$(this).removeClass('hover');
});
Related
I have a cover-image like this
When the user hover on my image, I want to :
show an camera icon on the top left, and
hide it back when the mouse move away.
I have tried
CSS
<style type="text/css">
#cover-img:hover{
opacity: .9;
}
#nav-upload-icon{
top: 10px;
left: 10px;
color: red;
z-index: 1000;
}
</style>
HTML
<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>
JS
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass( "hidden" );
});
I couldn't get it to behave what I expected to see.
What is the best way to implement something like that ?
JSFiddle
There is no reason to use JavaScript if that is the actual html code, you can use the next sibling selector with hover.
#cover-img:hover + #nav-upload-icon,
#nav-upload-icon:hover {
visibility: visible;
}
#nav-upload-icon {
visibility : hidden;
}
bind mouseout event to remove add the hidden class again
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
$("#nav-upload-icon").addClass("hidden");
});
Give position absolute to place it over the image
Fiddle
Go for #epascarello solution. It is the best.
The hover accepts two functions:
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
Fiddle
But obviously the CSS solution is better.
Your almost there. Add a second anonymous function to add the class for mouseleave
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
According to hover(), you can pass in handlerIn/handlerOut which are synonymous with mouseenter/mouseleave
DEMO
If you don't want to use javascript, wrap a div around the image.
<div class="image-wrap">
<img > <-- your super cool large image
<img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>
Then in the css you go something like this
div.image-wrap:hover img.upload {
opacity:0.9
}
Don't bother with javascript, it's 2015
This can be achieved without any JS. Using the adjacent selector you can show the icon when #cover-img is hovered on.
#cover-img:hover + img {
opacity: 1;
}
Updated Fiddle
I have a feeling this won't be possible, but thought I'd ask anyway.
<body> //body uses 'back' background
<div id="div1"> //div1 uses 'front' background
<div id="child1"> //child1: no backgrounds, so shows 'front' background
</div>
</div>
</body>
My body element uses a background image. (I'll call it the back background image)
div1 uses a different background image (I'll call it the front background image), so the front background image covers over the main background image.
div1 contains a child div child1 that doesn't use any background images, so it just shows the background image of its parent i.e. it shows the front background.
I would like child1 to use the background of body and not the background of its parent div1. Because of the nature of the back background (it's a drawing, not a repeating pattern), I can't just apply the back background image to child1. I actually need a way to make a hole in div1's background so that child1 gets the back background image as its background, and not its parent's background.
So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?
If this isn't possible with CSS, I'm open to javascript solutions.
This would be with using javascript and jQuery:
CSS
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
}
JS
$(function() {
function positionBackground() {
var myChild1 = $("#child1");
myChild1.css({
backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
});
}
positionBackground();
$(window).resize(positionBackground);
});
Here is the fiddle: http://jsfiddle.net/gMK9G/
I don't think you'll be able to change the way that styles are inherited, that said, you shouldn't really need to.
This is a little rough, but you could use the same image on the child div as you're using on the body and just play with the background positioning to line it up.
Working Example
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
background-position: 0px -125px; /* adjust as needed */
}
UPDATE 2 Elements in the DOM Cannot share the same background image, you can maybe apply the background image and position them exactly so that it looks like they are, but in reality it is not possible.
As far as I am aware this is not currently possible because css only has inherit and inherit "inherits" from it's parents and there is no way to customize that. Of course javascript can do this easily and I will provide a jQuery example only because you have the jquery tag.
$('.inherit-grandparent').each(function( element ) {
var $this = $(this),
property = $this.attr('grandparent-property'),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
});
Usage
<div class="inherit-grandparent" grandparent-property="background"></div>
Demo: http://jsfiddle.net/aKHfr/
So not only will this solve your problem, but it's dynamic so you can use it on any element and request any property.
Update:
Here is a jQuery Plugin version, if you would prefer that.
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
};
Usage:
$('#test').inheritGrandparent('background');
Demo: http://jsfiddle.net/aKHfr/2/
Happy Coding!
My HTML:
<div class="p1">
<div class="p2">
<div class="p3">
GandSOn
</div>
</div>
</div>
My css:
.p1 {
disapley: flex;
}
.p2{
display:inherit;
}
.p3 {
display:inherit;
}
I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});
I want to replace all #111 color (example color) with #222 (new color) in html file using jQuery. I want to do this to change the theme of website by single click.
Initial css:
body{
bg-color:#111;
color:#111;
}
div1{
bg-color:#111;
color:#111;
}
.
.
.
divn{
bg-color:#111;
color:#111;
}
After click event:
body{
bg-color:#222;
color:#222;
}
div1{
bg-color:#222;
color:#222;
}
.
.
.
divn{
bg-color:#222;
color:#222;
}
The best solution here is to define 2 css classes with cascaded styles to nested elements.
body { color:#111 }
.theme1 { color: #222; }
.theme2 { color: #333; }
.theme2 a { color: #003366; }
...
Then you can change the css class of your body element and all elements on the page will inherit new styles.
// theme1 color
<body class="theme1">
...
</body>
// theme2 color
<body class="theme2">
...
</body>
jquery code:
$('body').addClass('theme1');
The best way to change theme with one click is give some class to your body tag.
Then in your css:
body{ color: #111;}
body.secondTheme{color : #222; }
And you can bind change it for click event in jquery
$("#yourButton").click(function() {
$("body").toggleClass("secondTheme");
});
the proper way to do this would be to assign a css class to every html element you want to change color.
HTML:
<div class="colorChange">
CSS:
.colorChange{ color:#111;}
Then you would have a button that triggers a javascript function, which would change the color attribute of the colorChange class, I would recommend using jQuery:
$(".colorChange").css('color', '#222');
If you can toggle between classes I think it will be better; if you can't/don't want you can use the .filter function in jQuery:
$('yourselector').filter(function(){
return $(this).css('color')=='rgb(0, 1, 17)';
}).css('color','rgb(0, 2, 34)');
This will change all elements selected by yourselector with color rgb(0, 1, 17) to color rgb(0, 2, 34).
Obviously you can also do the same with other css attributes.
I have a CSS border property in place currently (border-left: 1px), and onClick, I have it removed via the first jQuery function below.
How can I set this up so that my second function will add back the property upon the second click? It should switch back and forth per click.
$(function(){
$('#button').click(function() {
$('#button-2').css('border-left','none');
});
$('#button').click(function() {
$('#button-2').css('border-left','1px');
});
});
I have now included the original code: www.jsfiddle.net/tonynggg/frnYf/12
Would it be easier to define a css class:
.button { border-left: 1px; }
.buttonClicked { border-left: none; }
And then use the jQuery toggleClass
So your code would be:
$(function(){
$('#button').click(function() {
$('#button-2').toggleClass('buttonClicked');
});
});
That would then toggle your alternate css class on an off when it's clicked. If nothing else, this should get you pointed in the right direction.
First, create a class that has the border:
.borderclass
{
border-left:1px black solid;
}
And then,
$(function(){
$('#button').click(function() {
if ($('#button-2').hasClass('borderclass'))
$('#button-2').removeClass('borderclass');
else
$('#button-2').addClass('borderclass');
});
});