I am working on a simple mouseout and mouseover functions. Basically, I have color boxes (or swatches) and I have to get the color of the specific box when hovered and when selected. You can see how it works in the fiddle.So I came out with a working script. But I am not sure how I can optimize or shorten the script since I will be having several color swatches. I made 2 samples swatches in this demo. The question: is there a way to optimize/shorten it? Contents in the script were almost the same for each functions. The class names were the only ones changed./* COLOR SWATCH 1*/$(.color).mouseover(function() {   var hex = $( this ).css(background-color);   var hexVal = $( this ).attr(value);   var styles = {      backgroundColor : hex    };    $('.selected-color').css(styles);    $('.selected-color').text(hexVal);});$(.color).mouseout(function() {    var hex = $('.active').css( background-color);    var hexValue = $('.active').attr(value);    var styles = {      backgroundColor : hex    };    $('.selected-color').empty();    $('.selected-color').css(styles);    $('.selected-color').text(hexValue);});$('.color').on('click', function() {   $(this).addClass('active').siblings().removeClass('active');    var hex = $(this).css(background-color);    var hexVal = $('.active').attr(value);    var styles = {      backgroundColor : hex    };    $('.selected-color').css(styles);    $('.selected-color').text(hexVal);}); /* COLOR SWATCH 2*/$(.color-2).mouseover(function() {   var hexs = $( this ).css(background-color);   var hexVal = $( this ).attr(value);   var styles = {      backgroundColor : hexs    };    $('.selected-color-2').css(styles);    $('.selected-color-2').text(hexVal);});$(.color-2).mouseout(function() {    var hex = $('.active-2').css( background-color);    var hexValue = $('.active-2').attr(value);    var styles = {      backgroundColor : hex    };    $('.selected-color-2').empty();    $('.selected-color-2').css(styles);    $('.selected-color-2').text(hexValue);});$('.color-2').on('click', function() {   $(this).addClass('active-2').siblings().removeClass('active-2');    var hex = $(this).css(background-color);    var hexVal = $('.active-2').attr(value);    var styles = {      backgroundColor : hex    };    $('.selected-color-2').css(styles);    $('.selected-color-2').text(hexVal);}); .color-swatch div {    width: 25px;    height: 25px;    float: left;    border: 1px solid #313131;    margin-right: 5px;  }.selected-color, .selected-color-2 {    width: 90px;    height: 20px;    color: #FFF;    text-align: center;    padding: 2px;}  .active, .active-2 {    border: 3px solid #151515 !important;}<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script><!-- COLOR SWATCH 1 --><p>SELECTED COLOR 1: <span class=selected-color style=background-color:#ef4060; value=Pink>Pink</span></p> <div class=color-swatch>     <div class=color style=background-color:#028482; value=Aqua></div>     <div class=color style=background-color:#4c0055; value=Purple></div>     <div class=color active style=background-color:#ef4060; value=Pink></div>         </div><!-- COLOR SWATCH 2 --><br><br><p>SELECTED COLOR 2: <span class=selected-color-2 style=background-color:#028482; value=Aqua>Aqua</span></p> <div class=color-swatch>     <div class=color-2 active-2 style=background-color:#028482; value=Aqua></div>     <div class=color-2 style=background-color:#4c0055; value=Purple></div>     <div class=color-2 style=background-color:#ef4060; value=Pink></div>         </div>
Color swatch selector with multiple mouseover and mouseout functions
javascript;jquery;html
HTML abuseThe HTML5 specification does not allow a <div> element to have a value attribute.  You can use a data-* attribute (named data-color, for example).  A title attribute would also be reasonable.You are misusing CSS classes as IDs.  An ID is a unique name for an individual element.  A class is a set of elements that should all be treated alike.  You should not have color and color-2 as two class names.  Rather, they should be a single class.Confused terminologyYour wording is a bit off, in my opinion.  Each individual sample is a swatch.  A color selector is a widget consisting of three swatches.When you make a decision by clicking on a swatch, the swatch isn't just active  I would say that that color has been selected.Based on the above, I would renamethe color and color-2 classes both to swatchthe color-swatch class to swatch-selectorthe active class to selectedjQueryOnce you rename the classes so that both widgets have the same class names, it becomes possible to write code that treats the swatch selector as a generic widget.If you need to define both a mouseover and a mouseout handler, use hover() instead.$(function() {    'use strict';    function showActiveColor($selector) {        var selectorId = $selector.attr('id');        var $selected = $selector.find('.swatch.selected');        $('#active-' + selectorId).empty()                                  .text($selected.data('color'))                                  .css({ backgroundColor: $selected.css('background-color') });    }    $('.swatch-selector .swatch').hover(        function mouseOver(event) {            var colorName = $(this).data('color');            var color = $(this).css('background-color');            var selectorId = $(this).closest('.swatch-selector').attr('id');            $('#active-' + selectorId).text(colorName)                                      .css({ backgroundColor: color });        },        function mouseOut(event) {            showActiveColor($(this).closest('.swatch-selector'));        }    ).click(function onClick(event) {        $(this).addClass('selected')               .siblings().removeClass('selected');    });    // Initialization so that you don't have to hard-code the span's    // background-color and text to match the initial selection    $('.swatch-selector').each(function(index, el) { showActiveColor($(el)); });});.swatch-selector .swatch {    width: 25px;    height: 25px;    float: left;    border: 1px solid #313131;    margin-right: 5px;}.swatch-selector .swatch.selected {    border: 3px solid #151515;}.color-name {    width: 90px;    height: 20px;    color: #FFF;    text-align: center;    padding: 2px;}  <script src=https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script><!-- COLOR SWATCH SELECTOR 1 --><p>SELECTED COLOR 1: <span class=color-name id=active-color-1></span></p> <div class=swatch-selector id=color-1>     <div class=swatch style=background-color:#028482; data-color=Aqua></div>     <div class=swatch style=background-color:#4c0055; data-color=Purple></div>     <div class=swatch selected style=background-color:#ef4060; data-color=Pink></div>         </div><br><br><!-- COLOR SWATCH SELECTOR 2 --><p>SELECTED COLOR 2: <span class=color-name id=active-color-2></span></p> <div class=swatch-selector id=color-2>     <div class=swatch selected style=background-color:#028482; data-color=Aqua></div>     <div class=swatch style=background-color:#4c0055; data-color=Purple></div>     <div class=swatch style=background-color:#ef4060; data-color=Pink></div>         </div>