jquery listホバリング変更側img

Question

<li>要素がホバリングされているときはいつでもサイディングdivのイメージとタイトルを変更しているアイコンのリストが必要です。何も配置されていないときはデフォルトイメージがあります。さて、これは実際には正常に動作しているが、やって任意のクリーンな方法があった場合、私は思っていた

$("#brain").hover(function() { 
 
     $("#brain img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "a.png"); 
 
     $("#icon-image-header").text("lorem"); 
 
     }); 
 
     $("#brain").mouseleave(function() { 
 
     $("#brain img").css("opacity", "0.5"); 
 
     }); 
 
     $("#body").hover(function() { 
 
     $("#body img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "b.png"); 
 
     $("#icon-image-header").text("ipsum"); 
 
     }); 
 
     $("#body").mouseleave(function() { 
 
     $("#body img").css("opacity", "0.5"); 
 
     }); 
 
     $("#planning").hover(function() { 
 
     $("#planning img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "c.png"); 
 
     $("#icon-image-header").text("dolor"); 
 
     }); 
 
     $("#planning").mouseleave(function() { 
 
     $("#planning img").css("opacity", "0.5"); 
 
     }); 
 
     $("#pen").hover(function() { 
 
     $("#pen img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "d.png"); 
 
     $("#icon-image-header").text("sit"); 
 
     }); 
 
     $("#pen").mouseleave(function() { 
 
     $("#pen img").css("opacity", "0.5"); 
 
     }); 
 
     $("#front").hover(function() { 
 
     $("#front img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "e.png"); 
 
     $("#icon-image-header").text("amet"); 
 
     }); 
 
     $("#front").mouseleave(function() { 
 
     $("#front img").css("opacity", "0.5"); 
 
     }); 
 
     $("#pie").hover(function() { 
 
     $("#pie img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "f.png"); 
 
     $("#icon-image-header").text("lorem"); 
 
     }); 
 
     $("#pie").mouseleave(function() { 
 
     $("#pie img").css("opacity", "0.5"); 
 
     }); 
 
     $("#bulb").hover(function() { 
 
     $("#bulb img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "g.png"); 
 
     $("#icon-image-header").text("ipsum"); 
 
     }); 
 
     $("#bulb").mouseleave(function() { 
 
     $("#bulb img").css("opacity", "0.5"); 
 
     }); 
 
     $("#db").hover(function() { 
 
     $("#db img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "h.png"); 
 
     $("#icon-image-header").text("dolor"); 
 
     }); 
 
     $("#db").mouseleave(function() { 
 
     $("#db img").css("opacity", "0.5"); 
 
     }); 
 
     $("#skills-icons").mouseleave(function() { 
 
     $("#icon-image-header").text("Lorem"); 
 
     $("#exp-img").attr("src", "i.png"); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="container"> 
 
    <div class="col-2" id="our-expertise-image"> 
 
    <div class="icon-image-container"> 
 
     <img src="i.png" alt="" id="exp-img"> 
 
    </div> 
 
     <h1 id="icon-image-header"> 
 
     Lorem 
 
     </h1> 
 
    </div> 
 
    <div class="col-2" id="our-expertise-icons"> 
 
    <h3 class="cat-header"><span>+</span>Lorem</h3> 
 
    <h1>Lorem Ipsum Dolor</h1> 
 
    <ul id="skills-icons"> 
 
     <li id="brain"><img src="brain-icon.png" alt=""></li> 
 
     <li id="body"><img src="body-icon.png" alt=""></li> 
 
     <li id="planning"><img src="planning-icon.png" alt=""></li> 
 
     <li id="pen"><img src="pen-icon.png" alt=""></li> 
 
     <li id="front"><img src="front-icon.png" alt=""></li> 
 
     <li id="pie"><img src="piegraph-icon.png" alt=""></li> 
 
     <li id="bulb"><img src="bulb-icon.png" alt=""></li> 
 
     <li id="db"><img src="db-icon.png" alt=""></li> 
 
    </ul> 
 
    </div> 
 
</article>

：ユーザーのカーソルが<ul>を離れる時はいつでも戻ってくるPNG」）は、ここではhtmlですこの。私はjqueryの初心者ですが、それは本当に長いようです。

Answer 1

ここでは、ソリューションhttps://jsfiddle.net/9fczjsgu/

var dic = { 
 
    "brain" : { 
 
    img: "a.png", 
 
    text: "lorem" 
 
    }, 
 
    "body" : { 
 
    \t img: "b.png", 
 
    text: "ipsum" 
 
    }, 
 
    "planning" : { 
 
    img: "c.png", 
 
    text: "dolor" 
 
    }, 
 
    "pen" : { 
 
    img: "d.png", 
 
    text: "sit" 
 
    }, 
 
    "front" : { 
 
    img: "e.png", 
 
    text: "amet" 
 
    }, 
 
    "pie" : { 
 
    img: "f.png", 
 
    text: "lorem" 
 
    }, 
 
    "bulb" : { 
 
    img: "g.png", 
 
    text: "ipsum" 
 
    }, 
 
    "db" : { 
 
    img: "h.png", 
 
    text: "dolor" 
 
    } 
 
}; 
 

 
$("li").hover(function() { 
 
    $(this).find("img").css("opacity", "1"); 
 
    $("#exp-img").attr("src", dic[$(this).attr('id').img]); 
 
    $("#icon-image-header").text(dic[$(this).attr('id').img]); 
 
}).mouseleave(function() { 
 
    $(this).find("img").css("opacity", "0.5"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="container"> 
 
    <div class="col-2" id="our-expertise-image"> 
 
    <div class="icon-image-container"> 
 
     <img src="i.png" alt="" id="exp-img"> 
 
    </div> 
 
     <h1 id="icon-image-header"> 
 
     Lorem 
 
     </h1> 
 
    </div> 
 
    <div class="col-2" id="our-expertise-icons"> 
 
    <h3 class="cat-header"><span>+</span>Lorem</h3> 
 
    <h1>Lorem Ipsum Dolor</h1> 
 
    <ul id="skills-icons"> 
 
     <li id="brain"><img src="brain-icon.png" alt=""></li> 
 
     <li id="body"><img src="body-icon.png" alt=""></li> 
 
     <li id="planning"><img src="planning-icon.png" alt=""></li> 
 
     <li id="pen"><img src="pen-icon.png" alt=""></li> 
 
     <li id="front"><img src="front-icon.png" alt=""></li> 
 
     <li id="pie"><img src="piegraph-icon.png" alt=""></li> 
 
     <li id="bulb"><img src="bulb-icon.png" alt=""></li> 
 
     <li id="db"><img src="db-icon.png" alt=""></li> 
 
    </ul> 
 
    </div> 
 
</article>

で行くキー&としてid秒でそれがimage &でJSONの形で再び値が含まれます、辞書（JSON）を作成します。 text。

希望すると、これが役立ちます。