Question

我正在尝试创建一个页面，其中包含用户悬停时将内容加载到同一页面上的div中的图像。到目前为止，我已经创建了html文件和样式表。它是一个相当简单的基于表格的页面，有三个图像对它们有css悬停效果并链接到三个不同的页面。我的挑战是弄清楚如何将内容加载到div中。我是Javascript的新手，所以这将是我想象的学习曲线，但任何帮助将不胜感激。我附上了一张图片来说明我想要做的事情。谢谢大家 ![page description ] 1

更新了问题。感谢大家的投入。（从假期回来 - 将会讨论建议）

我的css代码：

.Image1{
background-image:url('Image1_REG.jpg'); 
height:86px;
width:86px;
display: block;
}

.Image1:hover {
background-image:url('Image1_Shadow.jpg');
height:86px;
width:86px;
display:block;
}

.Image2{
background-image:url('Image2_REG.jpg'); 
height:86px;
width:86px;
display: block;
}

.Image2:hover {
background-image:url('Image2_Shadow.jpg');
height:86px;
width:86px;
display:block;
}

.Image3{
background-image:url('Image3_REG.jpg'); 
height:86px;
width:86px;
display: block;
}

.Image3:hover {
background-image:url('Image3_Shadow.jpg');
height:86px;
width:86px;
display:block;
}

#contentDiv{
height:150px;
width:350px;
left:50px;
top:150px;
position:absolute;
background-color:#452835;}

table {
width:600px;
height:auto;
column-width:200px;
left:150px;
top:150px;
}



<!DOCTYPE html>
<html lang="en">
  <head>
   <link rel="stylesheet" type="text/css" href="newStyle.css"></link>
  </head>
  <body>
  <body>
  <table>
  <tbody>
  <tr><img src="header.jpg" align ="center" /></tr>
    <tr>
      <td><a class="Image1" href="http://link1" target="_blank"></a>
</td>
      <td>
      <a class="Image2" href="http://link2" target="_blank"></a>
      </td>
      <td><a class="Image3" href="http://link3" target="_blank"></a></td>
    </tr>
  </tbody>
</table>
<div id="contentDetails">Where the hover text is to be displayed</div>
 </body>
</html>

Answer 1

你需要一点点JavaScript，但半小时内你无法学到什么。我建议你阅读MDN JS primer，但只是为了掌握JS的工作方式。

从本质上讲，您需要找到要悬停在其上的元素，然后在包含您内容的页面上放置多个<div>。您在要悬停的元素上添加JavaScript mouseover event，并在您提供给它的回调函数中添加How to get an element in JS，告诉它隐藏所有div，然后只显示所需的div。

我认为你应该能够从这些页面中找出所有内容：

祝你好运。如果你在写完一些代码后感到困惑，可以随意编辑你的问题并对我发表评论（所以我知道要看看），我会尝试帮助。

Answer 2

这是我创建的一个非常基本的示例，可以帮助您入门：

JS小提琴： http://jsfiddle.net/dvav1gdo/5/

<强> HTML

<div class="module">
    <div class="tabs">
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
    </div>
    <div class="tab-panels">
        <div class="tab-panel active">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>
            </div>
        </div>
        <div class="tab-panel">
            <div class="content">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="tab-panel">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>
            </div>
        </div>
    </div>
</div>

<强> CSS

.tab {
    display: inline-block;
}

.tab-panel {
    display: none;

    &.active {
        display: block;
    }
}

<强>的jQuery

$(document).ready(function () {

    var $tabs = $('.tab');
    var $panels = $('.tab-panel')

    // attach js event handler to all tab jQuery objects
    $tabs.on('mouseover', function() {
        var $this = $(this);
        // get hover index
        var hindex = $this.index();

        // use the active class to show and hide correct panel based on current hover index
        $panels.removeClass('active');
        $panels.eq(hindex).addClass('active');
    });
});

Answer 3

您可以使用悬停或点击功能来检测与图片的互动，然后您使用div id / name更改带有查询的文本我相信它应该是$("").text("Some info") 例如：

<div style="height:100px; width:100px" class="title"> //*
    first text
</div>

为了更改div类中"title"的文本所需的代码（参见上面的评论＆＃34; //*＆＃34;）

$('div.title').text('Some info');

另请参阅更多信息和＃34;使用jquery设置div标签的值＆＃34;：

Use jquery to set value of div tag

LINKS：

http://api.jquery.com/text/

http://api.jquery.com/hover/

http://api.jquery.com/click/

你也可以使用@tanjir的代码作为例子：

$('#img1').hover(function(){
     $('#contentDiv').text("content for text 1")
};

请记住

$('#img1'). hover(function(){
  // CODE EXECUTE HERE AFTER HOVER OF IMAGE 1
}

***这个例子在开始时有＃，因为他使用div的id而不是类名！所以它看起来像：

<div ID="img1">
</div>

当你将鼠标悬停在将执行评论的代码时，是否有一个等待你悬停的监听器。

将内容加载到div中

3 个答案: