如何通过将鼠标悬停在其他元素上来更改div中的文本 [英] How to change the text inside a div by hovering over other elements

问题描述

所以基本上我正在为我正在研究的项目制作一些概念逻辑。它是一个包含图像框的投资组合，我希望能够根据悬停的框将h2的值更改为某些描述文本。

现在它只是一个黑盒子，所以'square1，square2，square3 ... etc'现在可以工作。我查了一些关于jQuery的东西，并从stackoverflow的答案中找到了这个链接。这是我所需要的，但只是通过一个信息而不是在我的情况下转移。

想知道如何通过jquery实现。我想我需要创建一个数组，其中包含我需要的所有描述，并且（这是我丢失的位置）以某种方式将数组的值附加到正方形，然后从那里将h2的文本更改为数组值。

感谢您提前帮助这里我的意思到目前为止（没有多少只做一些基础工作）。不知道这是否重要，但如果没有悬停，我希望h2什么都不说。

HTML（让我发布代码，如果我有jsfiddle的话）

 < div class =squares> 
< div class =square1>< / div> 
< div class =square2>< / div> 
< div class =square3>< / div> 
< div class =square4>< / div> 
< div class =square5>< / div> 
< h2 class =squareIdent> < / H2> 
< / div> 
  

解决方案

您可以使用数据属性来实现此目的来保存您的描述你希望你的方块加载到h2中 -

工作示例 - http://codepen.io/nitishdhar/pen/CdiHa

说明

在此结构中编写HTML -

 < div类= 正方形 > 
< div class =squaredata-content =Alpha>< / div> 
< div class =squaredata-content =Beta>< / div> 
< div class =squaredata-content =Gamma>< / div> 
< h2 class =square-data-holder>< / h2> 
< / div> 
  

注意我已经添加了数据内容，它将包含您希望保留的任何文本。我们将使用它来提取相同的，当我们必须填写它在h2。

使用此jQuery代码片段实现悬停效果 -

  $（document）.ready（function（）{
 $（'。square'）。hover（
 function（）{ 
 $（'。square-data-holder'）。text（$（this）.data（'content'））。fadeIn（'slow'）; 
}，function（）{
 $（'。square-data-holder'）。fadeOut（'slow'）; 
}）; 
}）; 
  

hover（）需要两个处理程序来处理悬停在&悬停 - $（选择器）.hover（handlerIn，handlerOut），请参阅 - http://api.jquery.com / hover /

因此，在将任何div与类square悬停时，我们可以获得div悬停的内容 -

  $（this）.data（'content'）
  

然后我们在h2元素中添加相同的元素。在悬停时，我们只让h2变空。

这应该是你想要的。

So basically I am making some concept logic for a project I am working on. It's a portfolio with boxes of images and I want to be able to change the value of a h2 to some description text based on the box that was hovered on.

Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from a stackoverflow answer. This does what I need but is only shifting through one piece of information instead of many in my case.

Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value.

Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing.

HTML (makes me post code if I have jsfiddle)

<div class="squares">
    <div class="square1"></div>
    <div class="square2"></div>
    <div class="square3"></div>
    <div class="square4"></div>
    <div class="square5"></div>
    <h2 class="squareIdent"> </h2>
</div>

解决方案

You can implement this using data attribute to hold your description that you want your box to load in the h2 -

Working Example - http://codepen.io/nitishdhar/pen/CdiHa

Explanation

Write your HTML in this structure -

<div class="squares">
    <div class="square" data-content="Alpha"></div>
    <div class="square" data-content="Beta"></div>
    <div class="square" data-content="Gamma"></div>
    <h2 class="square-data-holder"></h2>
</div>

Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.

Use this jQuery snippet to achieve the hover effect -

$(document).ready(function() {
  $('.square').hover(
    function() {
      $('.square-data-holder').text($(this).data('content')).fadeIn('slow');
    }, function() {
      $('.square-data-holder').fadeOut('slow');
   });
});

hover() takes two handlers to handle hover in & hover out - $( selector ).hover( handlerIn, handlerOut ), Refer - http://api.jquery.com/hover/

So on hover of any of the div's with class square, we get hold of the content of the div that was hovered using -

$(this).data('content')

And we append the same to the h2 element. On hover out, we just make h2 empty.

This should do what you want.

这篇关于如何通过将鼠标悬停在其他元素上来更改div中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！