将鼠标悬停在一列图像上，以使文本显示在另一列中

Question

据我所知，很抱歉以各种不同的形式提出了这个问题，但我找不到确切问题的答案-至少不是我所理解的问题！

我对编程非常陌生，目前正在为自己的婚礼蛋糕业务建立一个网页，以尝试使自己熟悉HTML，CSS以及一些JavaScript和JQuery。 我在一列中有一个缩略图列表，在其中添加了“ onmouseover”，以便将鼠标悬停（除了css过渡），它们还会在中央列中显示自己的大版本。 我还想在主图像右侧的第三栏中显示有关每个蛋糕的信息，但是我不知道该怎么做！

<div class="col-md-3">
<ul class="cake-thumbs">
    <li>
        <figure class="cake-img">
            <img onmouseover="getElementById('preview').src=this.src" id="img10" src="Resources/img/10.jpg" alt="Pastel Pink Placard and Pearls">
        </figure>
    </li>
    <li>
        <figure class="cake-img">
            <img onmouseover="getElementById('preview').src=this.src" id="img11" src="Resources/img/11.jpg" alt="Naked Wedding Cake with fresh fruit">
        </figure>
    </li>
    <li>
        <figure class="cake-img">
            <img onmouseover="getElementById('preview').src=this.src" id="img12" src="Resources/img/12.jpg" alt="Gold Damask and Pearls">
        </figure>
    </li>
</ul>
</div>
<div class="col-md-6">
        <img id="preview" src="Resources/img/1.jpg" alt="">
</div>
<div class="col-md-3">
    <p id="info">Price and servings here</p>
</div>

Answer 1

jQuery将使这（等待它……）小菜一碟；）

$('.cake-img img').mouseover(function(){
    $('#preview').attr('src', this.src)
})

您可以将其放置在document.ready call中 ，放在页面的末尾或头部，从而删除已有的内联JavaScript。

Answer 2

这是一个简单的jquery表达式，可以完成此操作。

注意：这是一个广泛的问题，但这一定会带您正确的方向

$(document).on('hover', '.cake-img', function(event) {
    $('.col-md-3').text('sample text here');
});

Answer 3

问题是缺少document. 在getElementById()

 <div class="col-md-3"> <ul class="cake-thumbs"> <li> <figure class="cake-img"> <img onmouseover="document.getElementById('preview').src=this.src" id="img10" src="http://lorempixel.com/50/50/city" alt="Pastel Pink Placard and Pearls"> </figure> </li> <li> <figure class="cake-img"> <img onmouseover="document.getElementById('preview').src=this.src" id="img11" src="http://lorempixel.com/50/50/sports" alt="Naked Wedding Cake with fresh fruit"> </figure> </li> <li> <figure class="cake-img"> <img onmouseover="document.getElementById('preview').src=this.src" id="img12" src="http://lorempixel.com/50/50/cats" alt="Gold Damask and Pearls"> </figure> </li> </ul> </div> <div class="col-md-6"> <img id="preview" src="http://lorempixel.com/50/50/nature" alt=""> </div> <div class="col-md-3"> <p id="info">Price and servings here</p> </div> 

Answer 4

在这里，我将鼠标移到了直接附加到元素上的事件上，并创建了一个带有“ info”类的子div，将其悬停时将其复制到第三列。 我为每个包含附加完整尺寸图像的img附加了一个“数据预览”属性，该图像将放置在预览列中。

我也将事件绑定到了mouseenter之外，以便单击，以便移动用户访问您的网站时，他们可以单击图像（很少有移动设备支持鼠标事件）。

 $(document).on('mouseenter click','.cake-img',function(){ $('#preview').attr('src',$('img',this).data('preview')); // Copy source to preview $('#info').html($('.info',this).html()); // Copy text }); 

 body{padding-top: 75px} /* Look pretty in stack overflow full screen */ .cake-thumbs figure { display: inline-block } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <ul class="cake-thumbs"> <li> <figure class="cake-img"> <img id="img10" src="http://via.placeholder.com/100/00ffff?text=Thumbnail" alt="Pastel Pink Placard and Pearls" data-preview="http://via.placeholder.com/250/00ffff&text=Full Image 1"> <div class="info hide"> Price and servings 1 </div> </figure> </li> <li> <figure class="cake-img"> <img d="img11" src="http://via.placeholder.com/100/0000ff?text=Thumbnail" alt="Naked Wedding Cake with fresh fruit" data-preview="http://via.placeholder.com/250/0000ff&text=Full Image 2"> <div class="info hide"> Price and servings 2 </div> </figure> </li> <li> <figure class="cake-img"> <img id="img12" src="http://via.placeholder.com/100/00ff00?text=Thumbnail" alt="Gold Damask and Pearls" data-preview="http://via.placeholder.com/250/00ff00&text=Full Image 3"> <div class="info hide"> <h3>More complicated info</h3> <ul> <li>Unbox</li> <li>Eat</li> <li>Watch waistline grow</li> </ul> </div> </figure> </li> </ul> </div> <div class="col-md-6"> <img id="preview" src="Resources/img/1.jpg" alt=""> </div> <div class="col-md-3"> <p id="info">Price and servings here</p> </div> 

Answer 5

这是我可以完成您想要的方式。 通常，您会有两个图像，一个小缩略图和一个大图像。 您可以将缩略图位置放在.cake-image中的img的src中。 然后，您将有一个全尺寸图片的链接，该链接将位于a.image-preview的href中。 这将使您的页面加载速度更快，因为您最初只加载缩略图，并且仅在需要时才加载完整图像。

对于文本部分，我将添加一个数据属性，例如data-description ，在其中放置描述或所需的其他值。 然后，可以使用类似于$("element_selector").data("wha-is-after-hypen").来提取该内容$("element_selector").data("wha-is-after-hypen"). 请参见下面的代码。

注意：我假设您使用的是twitter boostrap和jquery，因此在代码的开头提供了链接。

 (function($) { $(document).ready(function() { //execute this when the document is ready $(".image-preview").on("mouseover click", mouseoverHandler); //Bind actions to the mouseover and click events. Why click? because if someone clicks on your link you will be redirected to the image. function mouseoverHandler(event) { event.preventDefault(); //Prevent the default action, in this case click is the trouvlesome one $("#preview").prop("src", $(this).attr('href')); // replace the previews src with the href of your link $("#info").html($(this).data('description')); //Add the data description to your info element }; }); })(jQuery); 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="row"> <div class="col-xs-3"> <ul class="cake-thumbs"> <li> <a class="image-preview" href="https://s-media-cache-ak0.pinimg.com/736x/7a/18/07/7a18076909f51c90242c4d03e5be012f.jpg" data-description="5"> <figure class="cake-img"> <img id="img10" src="https://s-media-cache-ak0.pinimg.com/736x/7a/18/07/7a18076909f51c90242c4d03e5be012f.jpg" alt="Pastel Pink Placard and Pearls" width="100px"> </figure> </a> </li> <li> <a class="image-preview" href="https://s-media-cache-ak0.pinimg.com/736x/cb/e7/99/cbe79953ed564435600981aaffe5593c.jpg" data-description="8"> <figure class="cake-img"> <img id="img11" src="https://s-media-cache-ak0.pinimg.com/736x/cb/e7/99/cbe79953ed564435600981aaffe5593c.jpg" alt="Naked Wedding Cake with fresh fruit" width="100px"> </figure> </a> </li> <li> <a class="image-preview" href="https://apis.xogrp.com/media-api/images/b4adc5bb-71b3-f0de-edeb-25f42dc2cf91~sc_320.320" alt="Naked Wedding Cake with fresh fruit" data-description="3"> <figure class="cake-img"> <img id="img12" src="https://apis.xogrp.com/media-api/images/b4adc5bb-71b3-f0de-edeb-25f42dc2cf91~sc_320.320" alt="Gold Damask and Pearls" width="100px"> </figure> </a> </li> </ul> </div> <div class="col-xs-6"> <img id="preview" src="" alt="" width="200"> </div> <div class="col-xs-3"> <p id="info">Price and servings here: </p> </div> </div>