[英]Change CSS3 Background image on <p> hover
I'm trying to make the background image (that I set using the CSS3 "background" and "background-size") change when I hover over a certain paragraph.当我在某个段落上使用 hover 时,我正在尝试使背景图像(我使用 CSS3“背景”和“背景大小”设置)发生变化。 I've tried:我试过了:
in jQuery在 jQuery
$(function () {
$('#web').hover(function () {
$(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
})
});
in Javascript在 Javascript
onMouseOver="document.getElementByName("body").style.backgroundColor = 'red';
and others with no luck.和其他没有运气的人。
First,第一的,
$(function(){
$('#web').hover( function(){
$(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
}); // <-- you missed this, meaning 'end of hover function'
});
Also,还,
onMouseOver="document.getElementByName('body').style.backgroundColor = 'red';
Currently, the browser will think the onmouseover
function stops at the "
before body
. The browser will set everything between "
and the second "
to onmouseover
. So that's:目前,浏览器会认为onmouseover
function 停在"
之前的body
。浏览器会将"
和第二个"
之间的所有内容设置为onmouseover
。那就是:
document.getElementByName(
which doesn't quite work obviously.这显然不太有效。 You'd need to change the first and last "
into a '
. That way, the browser will take everything between the '
s as the onmouseover
value which works.您需要将第一个和最后一个"
更改为'
。这样,浏览器会将'
之间的所有内容作为有效的onmouseover
值。
Have you considered doing this entirely with CSS3 pseudo-classes?您是否考虑过完全使用 CSS3 伪类来做到这一点? In other words:换句话说:
#web:hover {
background: #000 url(space-image.png) center center fixed no-repeat;
}
EDIT:编辑:
Do you want to change the background image of the entire page or just a single element?您想更改整个页面的背景图像还是仅更改单个元素? If it's the entire page, then you'll want to substitute $('body') for $(this), since $(this) is just referring to the #web element that you're selecting in the previous line.如果是整个页面,那么您需要将 $('body') 替换为 $(this),因为 $(this) 只是指您在上一行中选择的 #web 元素。
$("p").hover(function() {
$("p").css("background-color", "yellow");
}, function() {
$("p").css("font-size", "25px");
});
above example contain how to change the background-color
and font-size
using hover.上面的示例包含如何使用 hover 更改background-color
和font-size
。
This works: http://jsfiddle.net/gilly3/aBCqQ/这个作品: http://jsfiddle.net/gilly3/aBCqQ/
$(function(){
$("div").hover(function(){
$(this).css({backgroundImage: "url(http://farm2.static.flickr.com/1234/1324629526_1020726ce3_m.jpg)"});
},function(){
$(this).css({backgroundImage: ""});
});
});
Some observations with your non-jQuery code:对非 jQuery 代码的一些观察:
What does onMouseOver
refer to? onMouseOver
指的是什么? Are you assigning that string to a variable?您是否将该字符串分配给变量? The onmouseover
property of an element must be in all lower case.元素的onmouseover
属性必须全部小写。
You have to escape quotes in your string with \
.您必须使用\
转义字符串中的引号。 So ...("body")...
becomes ...(\"body\")...
.所以...("body")...
变成...(\"body\")...
。
There is no getElementByName
method.没有getElementByName
方法。 There's a getElementsByName
(plural), but did you really give an element a name attribute of "body"?有一个getElementsByName
(复数),但你真的给元素一个名称属性“body”吗? You can get the body element simply by: document.body
.您可以简单地通过以下方式获取 body 元素: document.body
。
Why use a string, you should use a function:为什么要使用字符串,应该使用 function:
myElement.onmouseover = function() {
document.body.style.backgroundColor = "red";
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.