Question

当鼠标移到图像上方时，我想放大图像，然后将其恢复为正常。使用我的JavaScript中的getPhoto函数，可以正常大小加载图像，但是当我将鼠标悬停在图像上时，没有任何反应。

我在做什么错了？

document.getElementById("photo").onmouseover = function() {
  mouseOver()
};
document.getElementById("photo").onmouseout = function() {
  mouseOut()
};

function getPhoto(handle) {
  var img = new Image();
  var div = document.getElementById("photo");
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
  img.src = "https://res.cloudinary.com/harmhxmnk/image/upload/" + handle;
  img.height = 32;
  img.onload = function() {
    div.appendChild(img);
  };
}

function mouseOver() {
  var img = document.getElementById("photo");
  img.height = 100;
}

function mouseOut() {
  // TODO
}

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
}

<div class="photo" id="photo"></div>

Answer 1

不需要JS IMHO：-）

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("localhost", "user", "password", "database");

$result = $conn->query("SELECT stu, mod, cat, com, cru, for, con, cmt FROM maintable");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}
$outp .= '{"stu": "' . $rs["stu"]  . '",';
$outp .= '"mod": "'  . $rs["mod"]  . '",';
$outp .= '"cat": "'  . $rs["cat"]  . '",'; 
$outp .= '"com": "'  . $rs["com"]  . '",'; 
$outp .= '"cru": "'  . $rs["cru"]  . '",'; 
$outp .= '"for": "'  . $rs["for"]  . '",'; 
$outp .= '"con: "'   . $rs["con"]  . '",'; 
$outp .= '"cmt": "'  . $rs["cmt"]  . '"}'; 
}
$outp .="]";

$conn->close();

 echo($outp);
?>

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
  transform: scale(1);
  transition: transform .5s;
}

.photo:hover {
  transform: scale(1.2);
}

Answer 2

到目前为止，没有一个答案可以解释为什么它不起作用。它不起作用的原因是您在图像上设置了32的高度。但是，当您设置高度时，是将其设置在div而不是图像上。因此，如果您想以自己的方式进行操作，则需要选择图像。 querySelector将让您引用元素中的图像。

function mouseOver() {
  var img = document.querySelector("#photo img");
  img.height = 100;
}

Answer 3

我认为仅为此使用css会更容易，更干净

#photo:hover{
    height: 100:
}

Answer 4

使用flexbox（demo）使用CSS非常简单

.col {
  display: flex;
}

.col img {
  margin: 5px 5px; /* more margin makes the image smaller */
  flex-grow: 1;
}

.col img:hover {
  margin: 0 0; /* less margin on hover makes the image bigger */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">       
        <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
  </div>  
</div>

如何使用Javascript在鼠标悬停时放大图像？

4 个答案: