There is some support for this in QuickEdit; 99% of the work is done. Here’s my 1% that switches it on.
In
assets/modules/quick_edit/javascript/QuickEdit.js I set a mouseover event to change the class of the parent block.
Replacing line 60:
link.setStyle('display','block');
with:
link.setStyle('display','block');
link.onmouseover=function() {
link.parentNode.className += " QE_Parent";
}
link.onmouseout=function() {
link.parentNode.className = link.parentNode.className.replace("QE_Parent", "");
}
In
assets/modules/quick_edit/styles/toolbar.css I set a background-color for the class, and as you can see, background-image is already there.
Replacing line 117:
with:
a.QE_Link {
z-index: 900;
Replacing line 136:
.QE_Parent {
background-image: url(../images/parent_bg.gif) !important;
background-repeat: repeat !important;
with:
.QE_Parent {
background-image: url(../images/parent_bg.gif) !important;
background-repeat: repeat !important;
background-color: #f8fff8 !important;
I find the onmouseover to be the clearest method but if your blocks don’t nest or overlap you might prefer it static. Of course, this only works when you’re showing embedded buttons in the page.