Question

我需要将图像更改为onmouseenter /悬停到其他图像。我环顾四周，发现了很多翻滚解决方案，但这对我不起作用，因为我还需要在悬停时缩放图像。

#recent中的最后一张图片似乎也被打破了，将鼠标悬停在#galleries部分上有一个指向它的链接，我无法弄清楚是否是因为col-md-offset-1或其他原因。< / p>

<body>
  <div id="wrap">

    <div id="topbar">
    </div>

    <div id="menu">
    </div>

    <div id="logo">
    </div>

    <div id="jumbotron">
    </div>

    <div id="recent">
      <h1>Recent Work</h1>
      <div class="col-md-2 col-md-offset-1">
        <a href="http://shniper1337.github.io/firstbootstrap/">
          <img src="images/firstbootstrap.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.github.io/pong/">
          <img src="images/pong.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Photomontage-490696483">
          <img src="images/design.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Website-design-WIP-571887134">
          <img src="images/survivingearth.png" class="img-rounded">
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Old-Law-Firm-545208961">
          <img src="images/lawfirm.png" class="img-rounded">
      </div>
    </div>

    <div id="galleries">
      <div class="row">
        <div class="col-md-4">
          <h2>Website Design</h2>
          <p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
        </div>

        <div class="col-md-4">
          <h2>Software Engineering</h2>
          <p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
        </div>

        <div class="col-md-4">
          <h2>Other Work</h2>
          <p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
        </div>
      </div>
    </div>

    <div id="sn">
    </div>

    <div id="footer">
    </div>

  </div>

</body>


body {
  background-color: #EAE8EB;
}

wrap {
  margin: auto;
}

#topbar {
  width: 100%;
  height: 50px;
  background-color: #000;
  margin-top: -10px;
}

#jumbotron {
    width: 100%;
    height: 750px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}

#recent {
    margin: auto;
    background-color: #3C5F7C;
    width: 100%;
    height: 250px;
    margin-top: -20px;
}

#recent h1 {
    text-align: center;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 38px;
    font-weight: 700;
    padding-top: 10px;
    color: #EEF0F2;
}

#recent img {
    height: 155px;
    box-shadow: 5px 5px 5px #111111;
    margin-top: 10px;
    position: relative;
}

#galleries {
    background-color: #3c5f7c;
    height: 200px;
}

.col-md-4 {
    max-width: 27%;
    margin-left: 3%;
}

.row {
    margin-left: 6%;
}

#recent div:nth-of-type(1) img:hover {
    background-image: url("images/firstbootstrapfull.png"); 
    z-index: 1;
    position: relative; 
}

#recent div:nth-of-type(2) img:hover {

}

#recent div:nth-of-type(3) img:hover {

}

#recent div:nth-of-type(4) img:hover {

}

#recent div:nth-of-type(5) img:hover {

}

#galleries h2 {
    font-size: 32px;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 500;
    color: #EEF0F2;
}

#galleries div:nth-of-type(1) h2 {
    text-align: right;
}
#galleries div:nth-of-type(2) h2 {
    text-align: center;
}

#galleries div:nth-of-type(3) h2 {
    text-align: left;
}

#galleries p {
    font-size: 18px;
    font-family: 'Catamaran', sans-serif;
    font-weight: 300;
    color: #eef0f2;
}

#galleries div:nth-of-type(1) p {
    text-align: right;
    margin: auto;
}

#galleries div:nth-of-type(2) p {
    text-align: center;
    margin: auto;
}

#galleries div:nth-of-type(3) p {
    text-align: left;
    margin: auto;
}

#footer {
  width: 100%;
  height: 20px;
  background-color: #000;
}

Here is a jsfiddle that appears to be broken

首选css解决此问题，但不是必需的。

Answer 1

您可以在CSS中添加类似的内容

#randomDiv {
 background-image: url('image.png');
 height: 70px;
 width: 120px;
}

#randomDiv:hover {
 background-image: url('differenthoverimage.png');
 width: 50px; // or whatever width you want
 height: 50px; // or whatever height you want
}

这应该会改变图像和高度/宽度。

（确保为您要执行此操作的每个图像添加不同的ID并在HTML中设置）

在缩放时更改悬停时的图像

1 个答案: