Is there any way to change an element's css while focusing or hovering on one of it's children?
Ex: while I move my mouse on A, B's background color changes.
if B is a descendant A, it is possible.
--A
-----B
using #A:hover #B { background-color: blue }
DEMO
in sibling:
---A
---B
It is : #A:hover ~ #B { background-color: blue; }
DEMO
assume B is a descendant of A.
what if I want to change #A background, while I am hovering on B. how could it be?
--A
-----B
Ross Brasseaux :
Doing this in pure CSS is unfortunately not possible...at this time. However, there is supposedly an upcoming parent selector that would work well in this scenario. Click here for more info.\n\nWork-around\n\nIn the meantime, you can also use javascript and/or jquery to accomplish this pretty easily.\n\nDEMO\n\nHTML\n\n<div id=\"div1\">\n div 1 area\n <p id=\"paragraph\">\n This is paragraph\n </p>\n</div>\n\n\nCSS\n\n#div1 {\n border:1px solid lightgray;\n}\np {\n margin: 50px;\n background-color: lightblue;\n padding: 8px;\n}\n\n.altbg {\n background:grey;\n}\n\n\njQuery\n\n$(function(){\n $('#paragraph').mouseenter(function(){\n $(this).parent().addClass('altbg')\n }).mouseout(function(){\n $(this).parent().removeClass('altbg')\n });\n});\n",
2013-10-03T15:16:37