Develop Reference

On hover change all with same id with style 1 while changing the hovered div with style 2

I have some dynamic user generated divs.
I'm trying to create a function so when the user hovers on one of the divs it highlights while the other divs get blurred.
Therefore I need to figure out how (if possible) I can change the hovered div with one style while changing all the others with another style.
The generated divs are simply spawn through php as a simple div looking like this:
<div class="usercontainer" id="usercontainer"> </div>
I have tried something like this to change the div the user hovers on. But I can't figure out how I at the same time can change all the others.
Do I need javascript for it? or can it be done with css alone?
.usercontainer:hover
{
background-color: red;
opacity: 1.0;
}

I am sharing with css approach only, though you can do it by adding a class at parent with javascript.
Disadvantage of this approach is you have to use !important to override child styles.
.children {
display: inline-block;
height: 100px;
width: 100px;
background-color: grey;
color: red;
font-size: 50px;
border: solid 1px yellow;
}
.parent:hover .children {
opacity: 0.2;
}
.children:hover {
opacity: 1 !important;
}
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>

Getting JQuery to create multiple buttons that are styled in a group with CSS

So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).

The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)

How to add a diffrent background image to different div elements on hover?

I have several div elements aligned in a grid. I want them to have their specific different background images when the user hovers over them which disappear when the mouse leaves the div. Basically it's a users information page where every square has the data of a user. When people hover over the squares, the users' images appear as background images. Here's the HTML:
<div class="contributor">
Some great stuff here
</div>
Here's the jQuery code I'm currently using. The problem: It assigns the same image to every div while I want different images for each div.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
$(this).addClass('visible');
});
$('.contributor').mouseleave(function(){
$(this).removeClass('visible');
});
});
Here's the code for the 'visible' class:
.visible{
background-image: url('../res/dev-1.png');
}

Why do you use jQuery? use just CSS and pseudo-class :hover.
.contributor:hover{
background-image: url('../res/dev-1.png');
}
apply for diffrent div:
.contributor.diff-div:hover{
background-image: url('../res/dev-2.png');
}
If you can do something in the CSS, it is almost always it will be a better solution than using JavaScript

First, save the image url in an attribute named "imageurl" (which isn't parsed by the browser):
<div class="contributor" imgageurl="../res/dev-1.png"></div>
<div class="contributor" imgageurl="../res/dev-2.png"></div>
Then, use this jQuery code:
$('.contributor').mouseenter(function(){
var imgageUrl = $(this).attr("imageurl");
$(this).css("background-image" , imgageUrl);
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
Of course, you also have to build the HTML dynamically.

may be you can consider css function instead of addClass.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
if(this.id == "one")
$(this).css("background-image" , "url('../res/dev-1.png')");
else if(this.id == "two")
$(this).css("background-image" , "url('../res/dev-2.png')");
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
});

Try this with jquery. suppose you have six images from dev-1.png to dev-6.png then it will set them as bacground for div number 1 to 6 respectively
$(document).ready(function(){
$('.contributor').mouseover(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:url('../res/dev-"+index+".png');";
$("this").eq(index).attr('style',bI);
});
$('.contributor').mouseleave(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:none";
$("this").eq(index).attr('style',bI);
});
});

For reference (Too troublesome and Won't apply if you have a ton of elements)
This can be achieved with pure CSS.
images might take a second to load (random image services)
Working example: (not responsive open in full page)
.optionlist li {
background: #111;
color: #999;
padding: .5em;
list-style-type: none;
border: 1px solid;
max-width: 70px
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after {
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Start Background Control */
#red:after {
background: url(http://lorempixel.com/800/600/)
}
#blue:after {
background: url(http://lorempixel.com/800/601/)
}
#green:after {
background: url(http://lorempixel.com/801/600/)
}
#yellow:after {
background: url(http://lorempixel.com/801/601/)
}
#orange:after {
background: url(http://lorempixel.com/799/600/)
}
#white:after {
background: url(http://lorempixel.com/800/599/)
}
#black:after {
background: url(http://lorempixel.com/801/599/)
}
/* End Background Control */
<div class="optionlist">
<ul>
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</ul>
</div>

vaadin-combo-box / vaadin-combo-box-overlay change background color / Polymer API

I'm trying to override the background color present in vaadin-combo-box-overlay element.
Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)
:host {
position: absolute;
#apply(--shadow-elevation-2dp);
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;
.......
}
So I've tried something like:
:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;
}
Also I've tried with :host but I guess it should be used :root because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.
Also I'm wondering why the background is not parameterized as the text color is:
#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Specifying a different value for --primary-text-color I'm able to change the text color..
Thanks.

you can do it with javascript like that.
ready: function() {
var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
}
OR
ready: function() {
var css = '#selector .item { background-color:red; }';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
}
Would like to have a working CSS selector, but i cant set breakpoints in CSS to find out the right selectors!

You should use dom-module for styling vaading parts see example below:
<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
<template>
<style>
[part~="content"] {
background-color: red;
}
</style>
</template>
</dom-module>
Read more here https://github.com/vaadin/vaadin-themable-mixin/wiki

Thanks Patrick !!
I wasn't thinking about to do try it this way.
Here's what I did, a hacky solution though.
ready : function(){
var combo = this.$$('#comboid');
combo.addEventListener('vaadin-dropdown-opened'', function() {
var overlay = Polymer.dom(this.root).querySelector('#overlay');
overlay.style.backgroundColor = primaryBackground;
});
},
I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.

ExtJS - How to customize buttons?

I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim

simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}

Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc

Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}

I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}