Question

这个问题关注使用javascript来设置＆＃34; current link＆＃34;中的图像灰度。在导航中。

在以下导航栏中，有四个带有相应颜色的方块。它们的灰度应该在悬停，聚焦和活动时改变，并且当前页面的灰度应该改变，并且我已经尝试使用js灰色功能来显示我们在哪个页面。但是java脚本代码不起作用，只有第一页通过js代码

更改其灰度

＆＃13;

var current = document.getElementById('default');

function graying(el) {
  if (current != null) {
    current.className = "";
  }
  el.className = "graying";
  current = el;
}

＆＃13;

#nav {
  width: 100px;
  list-style: none;
  margin: 100px auto;
}
#nav img:active,
#nav img:focus,
#nav img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: gray;
  -webkit-transition: all .5s ease;
}
#nav img.graying {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: gray;
  -webkit-transition: all .5s ease;
}

＆＃13;

<ul id="nav">
  <li>
    <a href="blue.html">
      <img id="default" class="graying" onclick="graying(this);" src="images/red.png">
    </a>
  </li>
  <li>
    <a href="green.html">
      <img onclick="graying(this);" src="images/green.png">
    </a>
  </li>
  <li>
    <a href="red.html">
      <img onclick="graying(this);" src="images/blue.png">
    </a>
  </li>
  <li>
    <a href="yellow.html">
      <img onclick="graying(this);" src="images/yellow.png">
    </a>
  </li>
</ul>

＆＃13;

。使用＆＃34; onclick＆＃34;是否正确？在这种情况下？

感谢任何帮助。

Answer 1

您可以使用此代码

img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/* Disable grayscale on hover */
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}

<img src="http://lorempixel.com/630/170/">

如何在＆＃34;当前页面中使用javascript更改图像的灰度＆＃34;？

1 个答案: