將鼠標懸停在一列中的圖像上，以使文本出現在另一列

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

這裏失蹤document.我已經刪除了鼠標是直接連接到元素的事件，並創建了一個類孩子的div「信息「，這將被複制到第三列，當盤旋。我將一個屬性「data-preview」附加到每個包含要放在預覽列中的完整大小圖像的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 2

這是一個簡單的jQuery表達式，可以完成這件事。

注：這是一個很寬泛的問題，但是這將definitly讓你在正確的方向

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

Answer 3

jQuery將讓這個（等待它...）一塊蛋糕;）

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

您可以將它放在頁面的末尾或頭部，並用document.ready call包裝，刪除您擁有的內嵌JavaScript。

Answer 4

問題在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 5

這裏是我會完成你想要的方式。你通常有兩個圖像一個小縮略圖和一個更大的圖像。您可以將縮略圖位置放置在.cake-image內img的src中。然後你會有一個鏈接到你的完整大小的圖像，這將是在a.image-preview href。這會使您的頁面加載速度更快，因爲您最初只會加載縮略圖，並且只在需要時加載完整圖像。

對於文本部分，我會添加一個數據屬性，如data-description，我將放置描述或其他值。然後這可以使用沿着$("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>