Question

如何创建一个前缀为小缩略图的网址链接，这样当我将鼠标悬停在它们上面时，链接颜色和缩略图图像都会改变

例：

我现在正在使用带有锚标签的图像标签，我能够在悬停时更改锚标签文本颜色，但是我不知道如何相应地更改img src

CSS：

.hoverable-link {
   color: gray;
}
.hoverable-link:hover {
   color: blue;
}

HTML：

<div>
  <img src="thumbnail-1">  //Change to thumbnail-2
  <a href="#" class="hoverable-link">Cool Link</a>
</div>

JsFiddle：https://jsfiddle.net/rbb5ow1v/9/

总结：
[1]如何在悬停时更改img src
[2]如何同时触发两个元素的悬停事件

Answer 1

我会给fontello.com一个去吧

一旦您选择了所需的图标，您可以按照以下方式设置标签

的

的
<a href="#"><span class="icon-twitter"></span>example</a>

的

当您执行CSS时，您只需将悬停状态应用于锚点，因为fontello它也会通过使用CSS颜色属性来改变颜色。

编辑：

如果您使用的是特定的推特图标。尝试将其更改为SVG，并更改其填充。同样可以应用于fontello，您可以在其中显示任何内容并在悬停时显示。

Answer 2

[1]如何在悬停时更改img src
单独使用CSS无法做到这一点，因为 src 是 DOM属性而不是 CSS属性，实现这一点HTML DOM事件系统需要一些javascript

<body>
<div>
  <img onmouseenter="highlight(this)" onmouseleave="unhighlight(this)" 
       src="thumbnail1">
  <a href="#potato" class="hoverable-link">Some Link</a>
</div>
<script>
  function highlight(image) {
    image.src = "thumbnail2"; //Blue Image
  }
  function unhighlight(image) {
    image.src = "thumbnail1"; //Gray Image
  }
</script>
</body>

JsFiddle：https://jsfiddle.net/f0c7p3tL/2/
DOM事件列表：http://www.w3schools.com/jsref/dom_obj_event.asp

另一种方法是根本不使用 src DOM属性。相反，您可以使用 背景 CSS属性，这样您就可以使用 CSS：悬停选择器
CSS：

#my-thumbnail {
  background: url("/thumbnail1") no-repeat;
  width: 32px;
  height: 32px;
}
#my-thumbnail:hover {
  background: url("/thumbnail2") no-repeat;
}

HTML：

<div>
  <img id="my-thumbnail">
  <a href="#potato" class="hoverable-link">Some Link</a>
</div>

JsFiddle：https://jsfiddle.net/7xoprwky/

[2]如何同时触发两个元素的悬停事件
同样，这里有两种方法。

首先使用javascript和HTML DOM Events。在这种方法中，我们希望在周围的<div>父元素上触发它们，而不是在任何一个子元素上触发事件。然后，在事件处理程序中，我们选择子元素并相应地更改其 DOM属性

<body>
<div onmouseenter="highlight(this)" onmouseleave="unhighlight(this)">
  <img id="my-thumbnail" src="thumbnail1">
  <a   id="my-anchor" href="#potato">Some Link</a>
</div>
<script>
  var myThumbnail = document.getElementById('my-thumbnail'),
      myAnchor = document.getElementById('my-anchor');

  function highlight() {
    myThumbnail.src = "/thumbnail2";
    myAnchor.style.color = "blue";
    myAnchor.style.fontWeight = "bold";
  }

  function unhighlight() {
    myThumbnail.src = "/thumbnail1";
    myAnchor.style.color = "gray";
    myAnchor.style.fontWeight = "normal";
  }
</script>
</body>

JsFiddle：https://jsfiddle.net/2uthconL/

在第二种方法中，我们利用CSS选择器语法来突出显示我们周围div的内部元素

CSS：

#my-thumbnail-link {
}
#my-thumbnail-link img { /* Select all img tag inside div */
    background: url("/thumbnail1") no-repeat;
    width: 32px;
    height: 32px;
}
#my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */
    background: url("/thumbnail2") no-repeat;
}
#my-thumbnail-link a { /* Select all a tag inside div */
    color: gray;
}
#my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */
    color: blue;
    font-weight: bold;
}

HTML：

<div id="my-thumbnail-link" class="vcenter-parent">
  <img class="vcenter-child">
  <a href="#potato" class="vcenter-child">Some Link</a>
</div>

JsFiddle：https://jsfiddle.net/x61dy0mk/2/
有关CSS选择器的更多信息：http://www.w3schools.com/cssref/css_selectors.asp

如果您的缩略图只是一个静态资产，我推荐使用CSS方法而不是Javascript HTML DOM，因为它具有可读性和可维护性（想象一下，保留数千个事件处理程序）

Answer 3

也许你可以尝试这个：

HTML

<a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

造型的CSS

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}

此答案基于此问题CSS: image link, change on hover

更新 - 试试这个：

HTML

<ul>
  <li><a id="hoverable" href="#"><i class="home-icon"></i><span class="text">Link 1</span></a></li>
  <li><a id="hoverable" href="#"><i class="tshirt-icon"></i><span class="text">Link 2</span></a></li>
</ul>

CSS

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-icon {
  background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .home-icon {
    background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}

.tshirt-icon {
  background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .tshirt-icon {
  background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}

a#hoverable:hover {
  color: green;
  font-weight: bold;
}

演示位于此链接https://jsfiddle.net/nv4dw8vr/

在悬停时更改img src

3 个答案: