个人中心
gpt4 book ai didi

css - 缩放时在悬停时更改图像

转载 作者：太空宇宙 更新时间：2023-11-04 02:37:53 25 4
gpt4 key购买 nike

我需要获取图像以将 onmouseenter/hover 更改为不同的图像。我环顾四周，发现了很多翻转解决方案，但这对我不起作用，因为我还需要在悬停时缩放图像。

#recent 中的最后一张图片似乎已损坏，将鼠标悬停在#galleries 部分上有指向它的链接，我无法确定这是因为 col-md-offset-1 还是其他原因。

<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 解决此问题，但不是必需的。

最佳答案

你可以在你的 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 中设置它)

关于css - 缩放时在悬停时更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35314293/

25 4 0
文章推荐： javascript - calc函数中的100%是什么
文章推荐： node.js - NodeJS/Meteor 如何通过 request.get 和 future 从外部服务器下载许多文件？
文章推荐： node.js - express 包中的app.get方法
文章推荐： javascript - 仅当从 Node 运行时，Rsync 才会失败，退出代码为 23
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com