ZeroClipboard Issue #536

https://github.com/zeroclipboard/zeroclipboard/issues/536

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<div class='card'>

    <a class='clippy' id='copyMe2' data-clipboard-text='WHOA'>
        Copy 2
    </a>
</div>

CSS

.zeroclipboard-is-active {
    background: red;
}

.zeroclipboard-is-hover {
    background: blue;
}

.card {
    width: 200px;
    height: 100px;
    border: 1px solid #333;
}

.card:hover {
    background: #bbb;
}

/*
  This new CSS4 selector apparently is not slated to work in normal CSS...
  only in the JavaScript CSS Object Model (CSSOM).
*/
.card:has(> .clippy.zeroclipboard-is-hover) {
    background: #ddd;
}

.card:hover .clippy, .clippy.zeroclipboard-is-hover {
    display: block;
}

.clippy {
    display: none;
}

JavaScript

var $clippy = $(".clippy");
new ZeroClipboard($clippy);

$clippy
    .on("mouseenter", function(e) {
        var cardEl = e.currentTarget.parentNode;
        var displayStyle = window.getComputedStyle(cardEl).getPropertyValue("display");
        cardEl.style.display = displayStyle || "block";
    })
    .on("mouseleave", function(e) {
        var cardEl = e.currentTarget.parentNode;
        cardEl.style.display = "";
    });