Question

这应该很简单。只是不能做对。我希望我的网页加载50％不透明度的图片。然后，在mouseover上将不透明度设置为1，并在mouseout上再次返回0.5。

<!DOCTYPE html>
<html lang='no'>
<meta charset ="utf-8"
<head>

<title>Øving 7</title>

<style type="text/css">
img {
  opacity: 0.5;
}
</style>

<script src="jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function() {

    $("images").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
    });

</script>

</head>

<body bgcolor="lightgrey">
<h1>Oppgave 1 - jQuery</h1>

<img class="bild" src="b1.jpg" alt="Bilde1" border="0"/>
<img class="bild" src="b2.jpg" alt="Bilde2" border="0"/>
<img class="bild" src="b3.jpg" alt="Bilde3" border="0"/>
<img class="bild" src="b4.jpg" alt="Bilde4" border="0"/>
<img class="bild" src="b5.jpg" alt="Bilde5" border="0"/>


</body>
</html>

Answer 1

只需将$("images")更改为$("img")或将课程$(".build")

$("img").hover(function() {
    $(this).animate({opacity: 1.0}, 500);
}, function() {
    $(this).animate({opacity: 0.5}, 500);
});

Answer 2

Try this

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$(document).ready(function() {

    $(".vs").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
    });

</script>
<style>
.vs{
 opacity: 0.5;
width:33.33%;
}
</style>
<div class="w3-row-padding w3-hide-small" style="margin:0 -16px">
<div class="w3-third w3-center">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="vs">

</div>

<div class="w3-third w3-center">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="vs">

</div>

<div class="w3-third w3-center">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="vs">

</div>

</div>

＆＃13;

Answer 3

使用CSS而不是使用jQuery执行此操作。

use strict

jQuery：鼠标悬停时淡入图像，鼠标离开时淡出

3 个答案: