Question

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

现在它只是一个黑盒子，所以＆＃39; square1，square2，square3 ...等＆＃39;现在会工作的。我在jquery上查找了一些东西，并从stackoverflow的答案中找到了this链接。这就是我需要的，但在我的情况下只是通过一条信息而不是很多信息。

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

感谢您提前提供的任何帮助here's我到目前为止所做的事情（不仅仅是做了一些基础工作）。不确定这是否重要，但如果没有悬停，我希望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>

Answer 1

您可以使用数据属性来实现此功能，以保存您希望在h2中加载框的描述 -

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

解释

在此结构中编写HTML -

<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>

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

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

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

hover（）需要两个处理程序来处理悬停在＆amp;将鼠标悬停 - $（选择器）.hover（handlerIn，handlerOut），参考 - http://api.jquery.com/hover/

因此，当悬停任何具有类平方的div时，我们会抓住使用的div的内容 -

$(this).data('content')

我们将相同的内容附加到h2元素。在徘徊时，我们只是让h2为空。

这应该做你想要的。

Answer 2

根据http://danielmarkiewicz.com/的示例判断，您可能需要将格式化内容插入到标题中。这是使用每个方块内的HTML内容实现此目的的一种方法。

Demo here

HTML

<div class="squares">
  <div class="square square1">
    <span class="heading">
      <h1>Square 1</h1>
      <h2>Details</h2>
    </span>
  </div>
  <div class="square square2">
    <span class="heading">
      <h1>Square 2</h1>
      <h2>Details</h2>
    </span>
  </div>
  <div class="square square3">
    <span class="heading">
      <h1>Square 3</h1>
      <h2>Details</h2>
    </span>
  </div>
  <div class="square square4">
    <span class="heading">
      <h1>Square 4</h1>
      <h2>Details</h2>
    </span>
  </div>
  <div class="square square5">
    <span class="heading">
      <h1>Square 5</h1>
      <h2>Details</h2>
    </span>
  </div>
  <header class="squareIdent"></header>
</div>

CSS

.heading { display: none; }  // Hide the heading content within Squares

的JavaScript

$(document)
  .on('mouseover', '.square', function(e) {
    var self = $(this),
        headingContent = self.find('.heading').first().html();
    $('.squareIdent', self.closest('.squares')).html(headingContent);
  })
  .on('mouseout', '.square', function(e) {
    var self = $(this);
    $('.squareIdent', self.closest('.squares')).html(null);
  })
;

Answer 3

DEMO

我可能迟到了，因为Nitish已经给出了一个很好的答案，但这就是我所做的。

<强> HTML：

<div class="squares">
    <div class="square1" data-text="I am Square 1"></div>
    <div class="square2" data-text="I am Square 2"></div>
    <div class="square3" data-text="I am Square 3"></div>
    <div class="square4" data-text="I am Square 4"></div>
    <div class="square5" data-text="I am Square 5"></div>
    <h2 class="squareIdent"> </h2>
</div>

<强> CSS：

div.square1, div.square2, div.square3, div.square4, div.square5
{
    height: 100px;
    width: 100px;
    background-color: black;
    margin-left: 126px;
    margin-top: 150px;
    float: left;
}

div.squares
{
    margin-left: 175px;
}
.squareIdent{
    opacity: 0;
}

<强> JS：

$(".squares > *").hover(function(){
    $(".squareIdent").text($(this).attr("data-text"));
    $(".squareIdent").stop().animate({
        opacity: 1
    }, 500);
}, function(){
    $(".squareIdent").stop().animate({
        opacity: 0
    }, 500);
});

注意我已添加了您在问题中显示的动画。

如何通过将鼠标悬停在其他元素上来更改div中的文本

3 个答案:

DEMO