图像切换仅适用于实时网站上的一个 ID

卢卡斯·法里亚斯

我的 js/jquery 知识有限,我很难弄清楚为什么我无法在实时网站上进行以下设置;第二张图片不会在那里切换。

它确实适用于小提琴:https ://jsfiddle.net/05vkw2mj/2/

#HTML

<div id="rodrigo">
RODRIGO

<img src="https://ywamsantiago.com/wp-content/uploads/2020/04/MG_1218-Rodrigo-Oliveira-copy-web-ready-500x500.jpg" id="rodrigo-img"/></div>

<div id="bob">
BOB

<img src="https://ywamsantiago.com/wp-content/uploads/2020/04/MG_1218-Rodrigo-Oliveira-copy-web-ready-500x500.jpg" id="bob-img"/></div>

#JQUERY

  $(document).ready(function() {
    $("#rodrigo").hover(function() {
      $("#rodrigo-img").toggle();
    });

    $("#bob").hover(function() {
      $("#bob-img").toggle();
    })
  });

#CSS

body {
  padding-top:400px;
}
#rodrigo {
  position: relative;
}
#rodrigo-img {
  display: none;
  position: absolute;
  bottom: 25px;
  left:0;
  width: 350px;
  max-width: 100%;
}

#bob {
  position: relative;
}
#bob-img {
  display: none;
  position: absolute;
  bottom: 25px;
  left:0;
  width: 350px;
  max-width: 100%;
}
我们的

我认为这可能更容易理解。

$(document).ready(function() {
  $(".links").hover(function(e) {
    $($(e.target).data().img).toggle();
  });
});
.img-container {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.img-container img {
  position: absolute;
  display: none;
}

.links {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
  <img src="https://picsum.photos/id/1020/300" id="rodrigo-img" />
  <img src="https://picsum.photos/id/1/300" id="bob-img" />
</div>
<div id="rodrigo" class="links" data-img="#rodrigo-img">
  RODRIGO
</div>
<div id="bob" class="links" data-img="#bob-img">
  BOB
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

切换网站上只有一个显示更多/显示更少按钮,具有多个相同 ID 的按钮

PHP While ID循环仅适用于第一个ID

关于点击ID的jQuery仅适用于第一个输出

jQuery单击和切换不适用于类或ID

具有多个隧道ID的OvS VXLAN隧道仅适用于一个隧道ID

AngularMaterial mat-slide-toggle切换开关仅适用于第一个组件

CSS:复选框切换效果仅适用于第一个复选框

jQuery函数.click()适用于一个ID,但不适用

多个切换ID-另一个打开时关闭一个

模式中的上一个和下一个数据切换仅适用于已分页的照片

Laravel with() 仅适用于第一条记录(仅适用于 ID 为 1 的记录)

ClassList 切换仅适用于某些元素

Pandas :将权重应用于另一列,仅适用于某些 id

jQuery,滑动切换仅适用于1个部分

用于切换 2 个 div 并更改按钮文本的 Javascript 函数 - 标记不同的 ID

反应切换ID

多个具有相似ID的Divs用于切换

$(this).attr('id')仅适用于实际元素

GetElementBy 仅适用于 ID 而不适用于类

覆盖方法“等于”不适用于99个id

有什么方法可以添加一个切换的愿望清单,而不是由 id 指定的数据显示为愿望清单区域

我可以在一个网站上使用两个 Facebook 应用程序 ID 吗?

admob奖励视频不起作用或真实ID,仅适用于测试ID

Docker nginx容器内有多个网站-PHP容器仅适用于一个

根据 id 切换 div

在JavaScript中切换ID名称

多图像上传循环仅添加一个图像ID和路径数据库

适用于Android的PushSharp设备ID

Mongodb $ lookup不适用于_id