在一個div中的圖像來改變點擊和懸停

Question

目前，我有一個<div>背景圖像，當我將鼠標懸停在三個不同的按鈕上時，會發生變化。每個按鈕顯示不同的圖像。這個功能目前爲止還不錯，但我還希望點擊按鈕時仍保留懸停的背景圖像，以便即使當鼠標離開按鈕時，懸停狀態仍保持活動狀態（除非我將鼠標懸停在新按鈕上）。有什麼建議麼？看看我的JSFiddle。

$(document).ready(function() { 
 
    $(".content-box-column-1").hover(
 
    function() { 
 
     $('#shows').css('background-image', 'url(https://www.petfinder.com/wp-content/uploads/2012/11/125950112-adopt-second-cat-632x475.jpg)'); 
 
    }, 
 
    function() { 
 
     $('#shows').css('background-image', 'url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)'); 
 
    } 
 
); 
 
    $(".content-box-column-2").hover(
 
    function() { 
 
     $('#shows').css('background-image', 'url(https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg)'); 
 
    }, 
 
    function() { 
 
     $('#shows').css('background-image', 'url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)'); 
 
    } 
 
); 
 
    $(".content-box-column-3").hover(
 
    function() { 
 
     $('#shows').css('background-image', 'url(https://www.wired.com/wp-content/uploads/2014/10/cathug.jpg)'); 
 
    }, 
 
    function() { 
 
     $('#shows').css('background-image', 'url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)'); 
 
    } 
 
); 
 
    $(".buttons").hover(function() { 
 
    $(this).toggleClass("active"); 
 
    }); 
 
});

#container { 
 
    display: table; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 
.buttons { 
 
    width: 30%; 
 
    height: 200px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 1%; 
 
    text-align: center; 
 
} 
 
#shows { 
 
    height: 300px; 
 
    width: 400px; 
 
    background: #bada55; 
 
    background-size: cover; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    transition: background .2s ease-in-out; 
 
    background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg); 
 
} 
 
.active { 
 
    color: #bada55; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="content-box-column-1 buttons"> 
 
    <p>Cat Lick</p> 
 
    </div> 
 
    <div class="content-box-column-2 buttons"> 
 
    <p>Cat on a Couch</p> 
 
    </div> 
 
    <div class="content-box-column-3 buttons"> 
 
    <p>It's a Cat Hug!</p> 
 
    </div> 
 
</div> 
 

 
<div id="shows" style="background-image: url(&quot;https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg&quot;);"></div>

Answer 1

我相信這你想要做什麼......

您可以使用jQuery的.click()方法綁定一個click事件處理程序。

您必須將當前圖像存儲在單擊不同按鈕時發生變化的變量中。另外，爲了防止重複，您可以使用jQuery的.each()方法遍歷所有按鈕並將事件處理程序綁定到它們。

$(document).ready(function() { 
 
    var images = [ 
 
    'https://www.petfinder.com/wp-content/uploads/2012/11/125950112-adopt-second-cat-632x475.jpg', 
 
    'https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg', 
 
    'https://www.wired.com/wp-content/uploads/2014/10/cathug.jpg' 
 
    ]; 
 

 
    var currentImage = 'https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'; 
 

 
    var $shows = $('#shows'); 
 
    var $buttons = $(".buttons") 
 
    
 
    $buttons.each(function (index) { 
 
    $(this) 
 
     .hover(function() { 
 
     $shows.css('background-image', 'url(' + images[index] + ')'); 
 
     }, function() { 
 
     $shows.css('background-image', 'url(' + currentImage + ')'); 
 
     }) 
 
     .click(function() { 
 
     currentImage = images[index]; 
 
     $shows.css('background-image', 'url(' + currentImage + ')'); 
 
     }); 
 
    }); 
 

 
    $buttons.click(function() { 
 
    $buttons.removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
});

#container { 
 
    display: table; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 
.buttons { 
 
    width: 30%; 
 
    height: 200px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 1%; 
 
    text-align: center; 
 
} 
 
.buttons:hover, 
 
.active { 
 
    color: #bada55; 
 
} 
 
#shows { 
 
    height: 300px; 
 
    width: 400px; 
 
    background: #bada55; 
 
    background-size: cover; 
 
    margin: 0 auto; 
 
    transition: background .2s ease-in-out; 
 
    background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg); 
 
}

<div id="container"> 
 
    <div class="buttons"> 
 
    <p>Cat Lick</p> 
 
    </div> 
 
    <div class="buttons"> 
 
    <p>Cat on a Couch</p> 
 
    </div> 
 
    <div class="buttons"> 
 
    <p>It's a Cat Hug!</p> 
 
    </div> 
 
</div> 
 

 
<div id="shows" style="background-image: url(&quot;https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg&quot;);"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

$(".buttons").click(function() { 
    var $this = $(this); 
    $('#shows').css('background-image', $this.data('imageurl')); 
}); 

<div id="container"> 
    <div class="content-box-column-1 buttons" data-imageurl="https://www.petfinder.com/wp-content/uploads/2012/11/125950112-adopt-second-cat-632x475.jpg"> 
    <p>Cat Lick</p> 
    </div> 
    <div class="content-box-column-2 buttons" data-imageurl="https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"> 
    <p>Cat on a Couch</p> 
    </div> 
    <div class="content-box-column-3 buttons" data-imageurl="https://www.wired.com/wp-content/uploads/2014/10/cathug.jpg"> 
    <p>It's a Cat Hug!</p> 
    </div> 
</div>