JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all">

<div class="demo">

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
    <li id="one" class="ui-widget-content">
      <div class="single-item">Item 1</div>
      <div class="single-item-survol">Item 1 <a href="http://www.google.fr" target="_blank">LOUPE</a></div>
    </li>
    <li id="two" class="ui-widget-content">Item 2</li>
    <li id="three" class="ui-widget-content">Item 3</li>
    <li id="four" class="ui-widget-content">Item 4</li>
    <li id="five" class="ui-widget-content">Item 5</li>
    <li id="six" class="ui-widget-content">Item 6</li>
</ol>

</div>

CSS

#feedback { font-size: 1.4em; }
    #selectable li.ui-selecting { border-color: #FECA40; }
    #selectable li.ui-selected { border-color: #F39814; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; font-size: 1.4em; height: auto; position: relative; overflow: hidden;}
    
.single-item-survol {
  background-color: red;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  top: -100%;
  left: 0;
}

#selectable li:hover .single-item-survol {
  top: 0;
}

#selectable li a {
  position: relative;
  z-index: 5;
}

JavaScript

$(function() {
    $("#selectable").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
				cancel: 'a',
        stop: function() {
            var result = $( "#select-result" ).empty();
             $( "li.ui-selected", this ).each(function() {
                    result.append( $(this).attr("id")+"," );
             });
         }
    });
  
});