css - onClick CSS 背景更改

标签 css background onclick

编辑:将函数名称更改为 swap,并将 onClick 函数作为 DIV 元素的一部分,但仍然无法正常工作。

我已经阅读了关于这个问题的几个主题,尝试了每个不同的代码,去 W3Schools 寻找最正确的代码。当有人点击它或其中包含的图像时,我想更改父 DIV 的背景。

以下是我的 HTML 的 HEAD 部分

<script type="javascript/text">
  <!--
    function swap() {
      document.getElementById("links").style.backgroundImage = "url('middle_background.png')";
    }
  -->
</script>

正文内容如下:

<div class="nav" id="links" onClick="swap();">
  <img src="images/links.png" alt="Links" />
</div>

这是单独文件中的 CSS:

.nav {
  position: relative;
  float: right;
  background: url(images/nav_buttons.jpg) no-repeat;
  width: 111px;
  height: 100px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

我向您保证图像:middle_backgrounds 在根文件夹中。 (图像文件夹中也有一份副本。)

最佳答案

在父 div 上使用 onclick 而不是 img 标签。 body 会在下面看

<div class="nav" id="links" onClick="changeBackgroundImage();" > <img src="images/links.png" alt="Links" /> </div>

关于css - onClick CSS 背景更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42407240/

相关文章:

CSS 问题,input[id]+label,:hover, 和 :checked 问题

c# - 从 aspx 页面上的按钮调用类

javascript - JQuery 更改 css 在鼠标释放时切换回

html - 如何修复 IE/FF 显示图像问题

css - IE8定位背景不显示

css - 更改背景 svg 的条纹 Angular

css - 行高不影响 contenteditable 中的第一行

javascript - 具有两个固定导航的 anchor 链接 - 复杂

javascript - 单击页面加载时的 HTML 按钮/链接

具有不同按钮的 Javascript 函数