Question

我试图在鼠标悬停时显示figcaption，它确实起作用，现在单击缩略图时将不显示精选图像。按照说明，我无法更改HTML或CSS，因此，感谢您的指导，请不要为我编写代码，但请给我一些建议。如果我删除了悬停图像库的功能，则效果很好。

window.addEventListener("load", function() {
   
    var thumbs = document.getElementById("thumbnails");
 
    
    thumbs.addEventListener("click", function (e) {
           
              
        if (e.target.nodeName.toLowerCase() == 'img') {
            
            var clickedImageSource = e.target.src;
              
            var newSrc = clickedImageSource.replace("small", "medium");           
 
            var featuredImage = document.querySelector("#featured img");
            featuredImage.src = newSrc;
            featuredImage.title = e.target.title;
				
			}
 
    });
	
	
});
 
	//hover figcaption
$(function() {
            $(#featured figcaption).each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 0 }, 800);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.8 }, 800);
                   })
                });
			});

/* general text formatting */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Lobster);

p, h1, h2, h3, ul, li, body {
    padding: 0;
    margin: 0;    
}


h1, h2, h3, nav, footer {
 font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
   font-family: "Open Sans", Verdana, Arial, sans-serif;
   font-size: 100%;
   background-color: #E8EAF6;
}
header {
    padding: 15px;
    width: auto; 
    margin: 0 0;
    background-color: #303F9F;   
    color: #FAFAFA;
    height: 30px;
}
header h2 {    
    float: left;
    font-size: 22pt;  
    margin-left:10px;
}
header nav {
     float: right;  
    margin: 10px 15px 10px 10px;
    top: 5px;
}

main {
    margin: 20px 20px;
}

#featured {
    margin: 0 2px;
    border: solid 1px #ccc; 
    padding: 8px 5px 3px 9px;
    width: 646px;
    background-color: #FAFAFA;
}

#featured figcaption {
    position: absolute;
    top: 476px;
    left: 32px;
    width: 636px;
    height: 70px;
    background-color: floralwhite;
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
    font-size: 150%;
    font-weight: bold;
    opacity: 0.8;
    padding: 22px 2px 2px 2px;
    text-align: center;
    display: block;
}

#thumbnails img {
    width: 116px;   
    height: 116px;
    border: solid 1px #ccc;
    padding: 4px;
    margin: 5px 2px;
    background-color: #FAFAFA;
}

#thumbnails img:hover {
    transform: scale(1.1);
    transition-duration: 300ms;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head >
   <meta charset="utf-8">
   <title>Chapter 9 - Share Your Travels</title>

  <link rel="stylesheet" href="css/styles.css" /> 
   <script type="text/javascript" src="js/project02.js"></script>   
</head>
<body>
<header>
    <h2>Share Your Travels</h2>
    <nav><img src="images/menu.png"></nav>
</header>
<main>
    <figure id="featured">
        <img src="images/medium/5855774224.jpg" title="Battle" />
        <figcaption>Battle</figcaption>
    </figure>
    <div id="thumbnails"> 
        <img src="images/small/5855774224.jpg" title="Battle" />
        <img src="images/small/5856697109.jpg" title="Luneburg" />
        <img src="images/small/6119130918.jpg" title="Bermuda" />
        <img src="images/small/8711645510.jpg" title="Athens" />
        <img src="images/small/9504449928.jpg" title="Florence" />
    </div>

</main>
</body>
</html>

Answer 1

如果认为问题是您忘记在选择器周围添加“和”。尝试更新：

$(#featured figcaption)

收件人：

$("#featured figcaption")

鼠标悬停时如何显示figcaption

1 个答案: