クリックするとJavaScript mouseenter/mouseleaveが無効になる

Question

私のサイトでは、mouseenter/mouseleaveでソースを変更し、ギリシコンを切り替えるイメージがある。グリッドアイコンをクリックすると、mouseenter/mouseleave関数が動作しなくなるようにしたいと思います。クリックすると、画像はホバー上で状態を変えるべきではなく、クリック時にしか変更できません。

マイHTML：

<div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="img/index-splash/1main.jpg" onmouseenter="hover1(this);" onmouseleave="unhover1(this);" id="ImageButton1" width="100%"> 
    </div> 
    </div> 
    <a class="glyphicon glyphicon-triangle-bottom glyphicon-read-more" href="javascript:click1();" id="GlyphiconButton1"> 
     <span class="sr-only">More</span> 
    </a> 
    </div> 

私はJavaScript： するvar hoverState =はtrue。関数の内部if(hoverState)を配置する

//Image Hover Blur 
if (hoverState == true) 
{ 
    function hover1(element) { 
     element.setAttribute('src', 'img/index-splash/1blur.jpg'); 
     $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    } 
    function unhover1(element) { 
     element.setAttribute('src', 'img/index-splash/1main.jpg'); 
     $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    } 

//Image Glyphicon Click Read More 
var image_tracker1 = 'main'; 

function click1() { 
    var image = document.getElementById('ImageButton1'); 
    if(image_tracker1=='main'){ 
    image.src = 'img/index-splash/1blur.jpg'; 
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    image_tracker1 = 'blur'; 
    }else{ 
    image.src = 'img/index-splash/1main.jpg'; 
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    image_tracker1 = 'main'; 
    } 
    hoverState = false; 
} 

Answer 1

試してみてください。これで問題が解決しない

var hoverState = true; 

//Image Hover Blur 
function hover1(element) { 
    if (hoverState) { 
     element.setAttribute('src', 'img/index-splash/1blur.jpg'); 
     $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    } 
} 

function unhover1(element) { 
    if (hoverState) { 
     element.setAttribute('src', 'img/index-splash/1main.jpg'); 
     $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    } 
} 

//Image Glyphicon Click Read More 
var image_tracker1 = 'main'; 

function click1() { 
    var image = document.getElementById('ImageButton1'); 
    if(image_tracker1=='main'){ 
    image.src = 'img/index-splash/1blur.jpg'; 
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    image_tracker1 = 'blur'; 
    }else{ 
    image.src = 'img/index-splash/1main.jpg'; 
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top"); 
    image_tracker1 = 'main'; 
    } 
    hoverState = false; 
}