<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Life on the water</h1>
<img src="./image/photo1.jpg" class="pic">
<img src="./image/photo2.jpg" class="pic">
<br>
<img src="./image/photo3.jpg" class="pic">
<img src="./image/photo4.jpg" class="pic">
<script type="text/javascript">
/* $(function () {
$(".pic").click(setBorder);
});
function setBorder() {
$(this).css("border", "solid 5px #ff0000");
} */
$(function () {
$(".pic").mouseover(function () {
$(this).css("border", "solid 5px #ff0000");
});
$(".pic").mouseout(function() {
$(this).css("border-style", "none");
});
});
</script>
</body>
</html>
