I'm using drupal 7,views slideshow and views slideshow cycle modules, I have a white background color when hover on the slide, I can't remove it or find their css selector in chrome webdeveloper.

Help me please.

enter image description here

  • Well it's not basically drupal related, you should have asked this on Stackoverflow, but since you asked, do you have a live preview so people can take a look? people can't debug somethig without seeing it! and be sure it's most likely a CSS issue, maybe related to the Theme you are using on your drupal installation. – Sohail Jun 17 '14 at 11:58
  • thank you, I just added a screenshot cuz the site is on localhost, I'm using omega theme. – learner123 Jun 18 '14 at 8:37
  • Well I'm pretty sure it's a CSS issue, you can use chrome "Toggle Element Style" while inspecting and check the hover so it stays on hover so you can debug it, I can't help you based on a screenshot more than this, if you can upload it to a free webhosting like getpantheon.com I can fix it for you – Sohail Jun 18 '14 at 11:09

As Sohail mentioned, it's really hard to figure this out for you without being able to view the actual web page. It's most definitely a CSS issue and is just a matter of finding the right selector. Can you just use Inspector in Chrome to find the selector that encompasses that area, and then search within the stylesheet it says it's using for that selector with hover? Perhaps just search the stylesheet for #fff to see where white is being used and then see where it is making that area white?

  • thank u ashlinry, I agree with u and Sohail its a css issue, I searched too much using chrome web developer with hover state (Toggle Element state), I didn't find the selector, I thought its a style from js files of jquery cycle plugin. I'll try to upload the site and putting the demo here. thanks – learner123 Jun 19 '14 at 9:27
  • No problem. If you want I can take a look at it too once you get it uploaded. Even if it's using jQuery, it's still most likely referencing some CSS (or also has some CSS file included that it's referencing. In that case you can just override the CSS. – ashlinry Jun 19 '14 at 16:41

Hope this will help you enter image description here

active the hover option of chrome inspector, than check on mouse over with which css rule make the background for your slider, find out the path of the css, than you can change the rule as per your requirement, if that rule is unnecessary not use for others also than u can remove that or you can override with your own css rule.


finaly I fix ,I found the selector in the omega base theme css file omega-visual.css

tr.even:hover td.active,
tr.odd:hover td.active {
/*  background: #FFFEEE;

Thank you so much

Not the answer you're looking for? Browse other questions tagged or ask your own question.