html - 如何在鼠标使用其中一个时连接两个不同元素的淡入淡出效果
问题描述
我在背景中有一张图片,上面有一个按钮。我想应用两个淡入淡出效果:当鼠标在按钮上时,它的不透明度降低,图像不透明度应该增加。我知道只用一个元素应用淡入淡出效果,但我不知道如何同时应用它们。
示例:查看此链接中的效果,但是当鼠标在其标题上而不是在图像上时它们应该激活,而标题不透明度从 1 变为 0.3。
.domicilio {
width:10%;
text-align:center;
padding:5px;
position: relative;
margin-left: 7%;
}
.domicilio img {
...
}
.domicilio button{
position: absolute;
top: 50%;
left: 165%;
/*Aspetto*/
font-family: OldEnglish;
background-color: #803c25;
color: #FFC107;
border-color: #FFC107;
font-size: 30px;
padding: 12px 24px;
cursor: pointer;
border-radius: 5px;
}
.domicilio button:hover{
opacity: 0.3;
transition: 0.3s;
}
<div class="domicilio">
<img src="...">
<a href="https://www.google.it">
<button>I'm dissappearing, the image behind me should light up</button>
</a>
</div>
解决方案
我相信一些 CSS 专家可能会使用纯 CSS 找到解决方案,但为了讨论,这里是使用 jquery 的示例。
请注意,您需要首先在 CSS 中的图像上添加第一个状态 css 不透明度,以便在第一次悬停时运行。然后你可以改变鼠标悬停的状态。
您可以在此处阅读悬停效果:https ://api.jquery.com/hover/关于更改 CSS https://api.jquery.com/css/
希望这会有所帮助,我相信尤达宝宝很高兴。
$( "#fade" ).hover(
function() {
$( "#img" ).css( "opacity", "1" );
$( "#img" ).css( "transition", "0.3s" );
}, function() {
$( "#img" ).css( "opacity", "0.3" );
$( "#img" ).css( "transition", "0.3s" );
}
);
.domicilio {
width:10%;
text-align:center;
padding:5px;
position: relative;
margin-left: 7%;
}
.domicilio img {
max-width: 400%;
opacity: 0.3;
transition: 0.3s;
}
.domicilio button{
position: absolute;
top: 50%;
left: 165%;
/*Aspetto*/
font-family: OldEnglish;
background-color: #803c25;
color: #FFC107;
border-color: #FFC107;
font-size: 30px;
padding: 12px 24px;
cursor: pointer;
border-radius: 5px;
}
.domicilio button:hover{
opacity: 0.3;
transition: 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="domicilio">
<img id="img"src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
<a href="https://www.google.it">
<button id="fade">I'm dissappearing, the image behind me should light up</button>
</a>
</div>
编辑:
ON 用户请求纯 JS 解决方案。
document.getElementById("fade").onmouseover = function()
{
document.getElementById("img").style.opacity = "1";
document.getElementById("img").style.transition = "0.3s";
}
document.getElementById("fade").onmouseleave = function()
{
document.getElementById("img").style.opacity = "0.3";
document.getElementById("img").style.transition = "0.3s";
}
.domicilio {
width:10%;
text-align:center;
padding:5px;
position: relative;
margin-left: 7%;
}
.domicilio img {
max-width: 400%;
opacity: 0.3;
transition: 0.3s;
}
.domicilio button{
position: absolute;
top: 50%;
left: 165%;
/*Aspetto*/
font-family: OldEnglish;
background-color: #803c25;
color: #FFC107;
border-color: #FFC107;
font-size: 30px;
padding: 12px 24px;
cursor: pointer;
border-radius: 5px;
}
.domicilio button:hover{
opacity: 0.3;
transition: 0.3s;
}
<div class="domicilio">
<img id="img"src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
<a href="https://www.google.it">
<button id="fade">I'm dissappearing, the image behind me should light up</button>
</a>
</div>
推荐阅读
- c# - System.Web.OData.Query.ODataQueryOptions.Filter 如何处理括号
- python - 如果并发读/写访问会发生什么?
- php - preg_match() 使用正则表达式获取图像的源链接
- scala - 猫效应:如何获得隐式 NonEmptyParallel
- c - C扫描输入字符串保存到错误的变量
- javascript - CouchDB 更新相关文档的最佳实践
- javascript - 当我尝试获取公约数 JavaScript 时出现无限循环问题
- reactjs - 在使用反应选择的material-ui中,如何通过仅按一次Tab将焦点移动到下一个控件?
- drop-down-menu - 无法从水平菜单中找到如何编辑标题 [prestashop 1.6]
- ios - IOS 中的 Waze 深层链接,使用“Open with Waze”打开我的应用