Question

我想在“{捕捉并快速分享任何内容”部分重新创建https://jumpshare.com/中的效果，当您将鼠标悬停在左侧文本上时，右侧blcok会显示其他图像。如果elemnet在同一个区块中，我知道这样做，但是如果他们在不同的div中我怎么能这样做呢？

我试过这个：

<div href="#" class='text'>
     Hover me
 </div>
<div class='image'>
    Show me
</div>

image{
  display: none;
}
.text:hover .image{
  display: block;
}

Answer 1

您列出的网站使用单独的css类，当用户将鼠标悬停时，该类会添加到每个div中。他们将他们的班级命名为＃34;被选中。＆＃34;请参阅下文，了解如何使用jquery添加和删除类以实现此效果。

<强> CSS

首先，当有人将鼠标悬停在你的div上时，创建你想要的样式：

.selected {
    background-color: lightblue;
    color: blue;
    font-weight: 700;
}

<强> jquery的

然后，创建一个jquery函数悬停在每个应用＆＃34;选择＆＃34;的div上。悬停时的课程，当它盘旋在另一个div上时将其移除。

$('.hoverdivs div').on('hover', function() {
    var selected = $('.hoverdivs div.selected');
    selected.removeClass('selected');
    $(this).addClass('selected');
});

<强> HTML

以下是我的假设代码的HTML样式：

<div class="hoverdivs">
    <div class="hoverdiv1">
    </div>
    <div class="hoverdiv2">
    </div>
    <div class="hoverdiv3">
    </div>
    <div class="hoverdiv4">
    </div>
</div>

请务必将初始格式应用于div并填充内容！希望这会有所帮助。

Answer 2

解决方案1号使用CSS：

.text:hover + .image {
   display: block;
}

+表示我调用邻居选择器，它选择主题元素旁边的元素。 Note: this only works if the elements sits beside each other.

解决方案2是使用JavaScript | jQuery：

// when pointer hovers the element
document.querySelector(".text").addEventListener("mouseenter", function () {
     document.querySelector(".image").style.display = "block";
});

// when pointer leaves the element
document.querySelector(".text").addEventListener("mouseleave", function () {
     document.querySelector(".image").style.display = "none";
});

// jQuery: onenter
$(".text").on("mouseenter", function () {
    $(".image").css("display", "block");
});

// jQuery: onleave
$(".text").on("mouseenter", function () {
    $(".image").css("display", "none");
});

由于您尝试复制示例网站中的某个功能，因此您应该附加多个显示不同图像的事件侦听器。

希望有所帮助。

如何在div中显示图像，onhover一些元素？

2 个答案: