Javascript 悬停时背景图像不会更改_Javascript

Javascript 悬停时背景图像不会更改

javascript

Javascript 悬停时背景图像不会更改,javascript,Javascript,我编写了以下代码来更改鼠标悬停在另一个区域上的div的背景图像。图像不会改变 function upDate(previewPic) { document.getElementById("image").innerHTML=previewPic.alt; document.getElementById("image").style.backgroundImage = "url('+previewPic.src+')"; } HTML: <div id="image"&g

我编写了以下代码来更改鼠标悬停在另一个区域上的div的背景图像。图像不会改变

function upDate(previewPic) { 
    document.getElementById("image").innerHTML=previewPic.alt;
    document.getElementById("image").style.backgroundImage = "url('+previewPic.src+')";
}

HTML:

<div id="image">
    Hover over an image below to display here.
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseout="unDo()">

/*Name this external file gallery.css*/
body {
    margin: 2%;
    border: 1px solid black;
    background-color: #b3b3b3;
}

#image {
    line-height:650px;
    width: 575px;
    height: 650px;
    border:5px solid black;
    margin:0 auto;
    background-color: #8e68ff;
    background-image: url('');
    background-repeat: no-repeat;
    color:#FFFFFF;
    text-align: center;
    background-size: 100%;
    margin-bottom:25px;
    font-size: 150%;
}

.preview {
    width:10%;
    margin-left:17%;
    border: 10px solid black;
}

img {
        width:95%;
}

/*Name this external file gallery.js*/

function upDate(previewPic) {
    document.getElementById("image").innerHTML=previewPic.alt;
    document.getElementById("image").style.backgroundImage = "url(' + previewPic.src + ')";
}

function unDo() {
    document.getElementById("image").innerHTML="Hover over an image below to display here.";
    document.getElementById("image").style.backgroundColor="8e68ff";
    document.getElementById("image").style.backgroundImage = "url('')";
}

JavaScript:

<div id="image">
    Hover over an image below to display here.
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseout="unDo()">

/*Name this external file gallery.css*/
body {
    margin: 2%;
    border: 1px solid black;
    background-color: #b3b3b3;
}

#image {
    line-height:650px;
    width: 575px;
    height: 650px;
    border:5px solid black;
    margin:0 auto;
    background-color: #8e68ff;
    background-image: url('');
    background-repeat: no-repeat;
    color:#FFFFFF;
    text-align: center;
    background-size: 100%;
    margin-bottom:25px;
    font-size: 150%;
}

.preview {
    width:10%;
    margin-left:17%;
    border: 10px solid black;
}

img {
        width:95%;
}

/*Name this external file gallery.js*/

function upDate(previewPic) {
    document.getElementById("image").innerHTML=previewPic.alt;
    document.getElementById("image").style.backgroundImage = "url(' + previewPic.src + ')";
}

function unDo() {
    document.getElementById("image").innerHTML="Hover over an image below to display here.";
    document.getElementById("image").style.backgroundColor="8e68ff";
    document.getElementById("image").style.backgroundImage = "url('')";
}

通过转义双引号连接变量，否则变量名将被视为

字符串

文字

/*将此外部文件命名为gallery.js*/
功能更新（预览WPIC）{
document.getElementById（“image”）.innerHTML=previewPic.alt；
document.getElementById（“image”）.style.backgroundImage=“url（\”“+previewPic.src+”\”）；
}
函数unDo（）{
document.getElementById（“image”）.innerHTML=“将鼠标悬停在下面的图像上，在此处显示。”；
document.getElementById（“image”）.style.backgroundColor=“8e68ff”；
document.getElementById（“image”）.style.backgroundImage=“url（“”）”；
}

/*将此外部文件命名为gallery.css*/
身体{
利润率：2%；
边框：1px纯黑；
背景色：#B3；
}
#形象{
线高：650px；
宽度：575px；
高度：650px；
边框：5px纯黑；
保证金：0自动；
背景色：#8e68ff；
背景图像：url（“”）；
背景重复：无重复；
颜色：#FFFFFF；
文本对齐：居中；
背景大小：100%；
边缘底部：25px；
字体大小：150%；
}
.预览{
宽度：10%；
左边缘：17%；
边框：10px纯黑；
}
img{
宽度：95%；
}


将鼠标悬停在下面的图像上以显示在此处。

通过转义双引号连接变量，否则变量名将被视为

字符串

文字

/*将此外部文件命名为gallery.js*/
功能更新（预览WPIC）{
document.getElementById（“image”）.innerHTML=previewPic.alt；
document.getElementById（“image”）.style.backgroundImage=“url（\”“+previewPic.src+”\”）；
}
函数unDo（）{
document.getElementById（“image”）.innerHTML=“将鼠标悬停在下面的图像上，在此处显示。”；
document.getElementById（“image”）.style.backgroundColor=“8e68ff”；
document.getElementById（“image”）.style.backgroundImage=“url（“”）”；
}

/*将此外部文件命名为gallery.css*/
身体{
利润率：2%；
边框：1px纯黑；
背景色：#B3；
}
#形象{
线高：650px；
宽度：575px；
高度：650px；
边框：5px纯黑；
保证金：0自动；
背景色：#8e68ff；
背景图像：url（“”）；
背景重复：无重复；
颜色：#FFFFFF；
文本对齐：居中；
背景大小：100%；
边缘底部：25px；
字体大小：150%；
}
.预览{
宽度：10%；
左边缘：17%；
边框：10px纯黑；
}
img{
宽度：95%；
}


将鼠标悬停在下面的图像上以显示在此处。

如果您愿意稍微修改HTML，可以通过使用相邻元素选择器仅使用CSS来实现

移动HTML中图像上方的缩略图，可以使用此选择器更改相邻div的背景。为每个缩略图提供一个ID：

<img class="preview" id="bacon" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" id="bacon2" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" >

<img class="preview" id="bacon3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy">

<div id="image">
  <span>    
     Hover over an image below to display here.
  </span>
</div>

您可以重新定位元素以匹配原始布局，请参见此以获取工作示例。

如果您愿意稍微修改HTML，可以通过使用相邻元素选择器仅使用CSS来实现

移动HTML中图像上方的缩略图，可以使用此选择器更改相邻div的背景。为每个缩略图提供一个ID：

<img class="preview" id="bacon" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" id="bacon2" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" >

<img class="preview" id="bacon3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy">

<div id="image">
  <span>    
     Hover over an image below to display here.
  </span>
</div>

您可以重新定位元素以匹配原始布局，请参见此以获取工作示例。

document.getElementById（“image”）.style.backgroundImage=“url（“+previewPic.src+”）”搁置：调用函数undo（）和update（），而不是undo（）和update（）。没有必要使用大写字母。document.getElementById（“image”）.style.backgroundImage=“url（“+previewPic.src+”）”搁置：调用函数undo（）和update（），而不是undo（）和update（）。你的资本化是没有必要的。