在jQuery中更改mouseover時data-attribute的background-image。

Question

喜歡的話題。有些東西不起作用...我想懸停在鏈接上並更改div元素的背景圖像。始終在data-rhomboid-img中設置的不同畫面上。

<div id="img-nav-rhomboid" class="nav-rhomboid"></div> 
      <ul class="menu-list"> 
       <li><a href="#" data-rhomboid-img="img/example1.jpg">A</a></li> 
       <li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li> 
      </ul> 

.nav-rhomboid{ 
    background: url(../img/nav-bg.png) no-repeat center center; 
    display: flex; 
    align-items: center; 
} 

$('li a').mouseover(function() { 
    var rhomboidImg = $(this).data('rhomboid-img'); 

    $('#img-nav-rhomboid').each(function() { 
     $(this).css('background', $(this).attr(rhomboidImg)); 
    }); 
}); 

Answer 1

您的jQuery的代碼中的一些錯誤，請檢查下面的更新的摘要：

$('li a').mouseover(function() { 
 
    var rhomboidImg = $(this).data('rhomboid-img'); 
 
    $('#img-nav-rhomboid').css('background', 'url('+rhomboidImg+') no-repeat'); 
 
});

.nav-rhomboid{ 
 
    background: url(../img/nav-bg.png) no-repeat center center; 
 
    display: flex; 
 
    align-items: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="img-nav-rhomboid" class="nav-rhomboid"></div> 
 
<ul class="menu-list"> 
 
    <li><a href="#" data-rhomboid-img="img/example1.jpg">A</a></li> 
 
    <li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li> 
 
</ul>

Answer 2

嘗試使用此行代碼$('#img-nav-rhomboid').css('background', 'url(' + rhomboidImg + ') no-repeat');

$('li a').mouseover(function() { 
 
    var rhomboidImg = $(this).data('rhomboid-img'); 
 
    $('#img-nav-rhomboid').css('background', 'url(' + rhomboidImg + ') no-repeat'); 
 
});

.nav-rhomboid { 
 
    background: url('http://s7d2.scene7.com/is/image/PetSmart/PB0101_HERO-Dog-Toys-20160818?$sclp-banner-main_large$') no-repeat center center; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#img-nav-rhomboid { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="img-nav-rhomboid" class="nav-rhomboid"></div> 
 
<ul class="menu-list"> 
 
    <li><a href="#" data-rhomboid-img="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">A</a></li> 
 
    <li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li> 
 
</ul>

Answer 3

這將這樣的伎倆......供你參考：

1-分配和高度和寬度到div NAV-菱形通過CSS

2。在你的js代碼你缺少一個CSS的產品線的一部分，你必須添加URL（）

3 - 你絕不應該有循環的需要在與ID元素（這必須是唯一的）

4-更新我的代碼與正確的路徑圖像（我只是做了一個測試我的IDE）

<div id="img-nav-rhomboid" class="nav-rhomboid"></div> 
<ul class="menu-list"> 
    <li><a href="#" data-rhomboid-img="images/back_release.jpg">A</a></li> 
    <li><a href="#" data-rhomboid-img="images/back_investors.jpg">B</a></li> 
</ul> 
<style> 
.nav-rhomboid{ 
    background: url(images/back_reset.jpg) no-repeat center center; 
    display: flex; 
    align-items: center; 
    min-height: 400px; 
    width: 100%; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$('li a').mouseover(function() { 
    var rhomboidImg = $(this).data('rhomboid-img'); 
    $('#img-nav-rhomboid').css('background', 'url('+rhomboidImg+')'); 
});