我要做的是，当用户将鼠标悬停在图像上时，图像上会出现带有信息图标的透明黑色覆盖图。
出于某种原因，我似乎无法找到我的逻辑错误。
我正在使用JQuery的toogleClass（）来切换隐藏类。
library(tidyverse)
library(sf)
pixel.zones_list <- pixel.zones %>%
split(f = .$zone.espg) %>%
map(~st_transform(., crs = unique(.$zone.espg)))
$(document).ready(function(){
$('.toggle_hide').hover(function(){
$(this).toggleClass('hide');
});
});* {
box-sizing:border-box;
margin:0;
padding:0;
}
a{text-decoration:none;}
.hide{display:none; transition: 0.5s ease all;}
答案 0 :(得分：0)
内联样式会覆盖来自包含的CSS样式表的样式，这可能就是问题所在。您应该阅读一下CSS Cascade以及它如何计算应用于给定元素的样式。
所以，例如FirestoreRecyclerOptions<Model1> fro1 = new FirestoreRecyclerOptions.Builder<Model1>()
.setQuery(query1, Model1.getDocParser())
.build();
FirestoreRecyclerOptions<Model2> fro2 = new FirestoreRecyclerOptions.Builder<Model2>()
.setQuery(query2, Model2.getDocParser())
.build();
永远不会有效，除非您删除内联样式.hide {display: none;}，它可能是CSS类，而不是内联。另一个选项，我不建议使用display: flex。
答案 1 :(得分：0)
只需将.hide中的课程css替换为：
.hide{opacity:0; transition: 1s ease all;}
而不是toggleClass()使用$(this).css({'opacity' : 1});来实现更好的转换
$(document).ready(function(){
$('.toggle_hide').hover(function(){
$(this).css({'opacity' : 1});
}, function(){
$(this).css({'opacity' : 0});
});
});* {
box-sizing:border-box;
margin:0;
padding:0;
}
a{text-decoration:none;}
.hide{opacity:0; transition: 0.5s ease all;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%; height:auto; display:flex; flex-direction:column; padding:0px 0px; ">
<span style="width:100%; height:150px; display:flex; justify-content:center; align-items:center; font-family:Ostrich Sans Bold; font-size:65px; font-weight:900; color:rgba(0,0,0,0.9);">NUESTROS BOCATAS</span>
<div id="content" style="width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;">
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style=" width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
<div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
<div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
<div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">
<i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
</div>
</div>
<div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
<a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
<a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
</div>
</div>
</div>
</div>