newcoder1010 Posted July 1, 2017 Share Posted July 1, 2017 Hello, HTML: <div class="views-field views-field-title"> <span class="field-content"> <a href="/content/install-and-set-eclipse">Install and Set Up</a></span> </div> Below css applies to only the anchor texts. #block-views-selenium-block-1 .views-field.views-field-title a.active{ background:green;} #block-views-selenium-block-1 .views-field.views-field-title a:hover{ background:red;} Two requests: When I hover on anchor, I would like the entire field to have a background color instead of just the anchor texts. When the link is active, I also would like the enter field to have a background color instead of just the anchor texts. Please advise. Link to comment Share on other sites More sharing options...
Ingolme Posted July 1, 2017 Share Posted July 1, 2017 You can either put the hover selector on the div element, or you can make the link a block and set its background color. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 1, 2017 Share Posted July 1, 2017 The active state is initiated by a class 'active' being present when you are physically on the page itself, the hover state is initiated by :hover pseudo class in css only when a mouse hover occurs over the element, which is different as no physical class name is required on the element itself. The html on the actual page itself, but the hover state css will still take place on hover, but the background colour will return to 'green'. <div class="views-field views-field-title"> <span class="field-content"> <a href="/content/install-and-set-eclipse" class="active">Install and Set Up</a></span> </div> Whereas other pages will return to the default colour set, which is not present. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 1, 2017 Author Share Posted July 1, 2017 I am trying the first solution. Hover works but active is doing nothing. #block-views-selenium-block-1 .views-field.views-field-title.active{ background:green;} #block-views-selenium-block-1 .views-field.views-field-title:hover{ background:red;} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 1, 2017 Share Posted July 1, 2017 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> /* default colouring*/ #block-views-selenium-block-1 .views-field.views-field-title{ background: #333;} /* colouring if active class present*/ #block-views-selenium-block-1 .views-field.views-field-title.active{ background:green;} /* colouring if active class present or not on hover*/ #block-views-selenium-block-1 .views-field.views-field-title:hover{ background:red;} </style> </head> <body> <div id="block-views-selenium-block-1"> <div class="views-field views-field-title"> <span class="field-content"> <a href="/content/install-and-set-eclipse">Install and Set Up</a></span> </div> <div class="views-field views-field-title active"> <span class="field-content"> <a href="/content/install-and-set-eclipse">Install and Set Up</a></span> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 1, 2017 Author Share Posted July 1, 2017 Thank you. But your styling of hover and active same as mine. I am still getting the same result. Hover works. Active does nothing. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 1, 2017 Author Share Posted July 1, 2017 or How can I make the anchor tag 100% width of the title field? #block-views-selenium-block-1 .views-field.views-field-title a{ width:100%} It did not work. This is a workaround I was thinking. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 1, 2017 Share Posted July 1, 2017 1 hour ago, newcoder1010 said: Thank you. But your styling of hover and active same as mine. I am still getting the same result. Hover works. Active does nothing. Then you must have some css that overrides that specific code, because as you can see, with my example, it does work! default colour gray, active class present the colour is green, when hover over either it turns red. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 1, 2017 Author Share Posted July 1, 2017 Understood. I have been inspecting and trying to find out what overriding and I could not find it. I appreciate your time. If you could visit the page and see what overriding it, it would be great. You have provided 3 styles. All works except active class. Link to comment Share on other sites More sharing options...
Ingolme Posted July 1, 2017 Share Posted July 1, 2017 The problem is that Drupal puts the active class right on the link instead of the div element. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 1, 2017 Author Share Posted July 1, 2017 So, are you saying I can not do it? Link to comment Share on other sites More sharing options...
Ingolme Posted July 1, 2017 Share Posted July 1, 2017 You can make the <a> element a block and set the background color on it instead of the div. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 1, 2017 Author Share Posted July 1, 2017 As you know, I am using drupal. I simply created a view to list titles of nodes. Titiles are linked to nodes. I am not sure how I would create <a> element block. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 2, 2017 Share Posted July 2, 2017 #block-views-selenium-block-1 .views-field.views-field-title a{ display: block;} Place this new line above below /* default colouring*/ #block-views-selenium-block-1 .views-field.views-field-title a{ background: #333;} /* colouring if active class present*/ #block-views-selenium-block-1 .views-field.views-field-title a.active{ background:green;} /* colouring if active class present or not on hover*/ #block-views-selenium-block-1 .views-field.views-field-title a:hover{ background:red;} Note these have been amended to target anchor now. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 2, 2017 Author Share Posted July 2, 2017 Thank you so much. Sorry I got confused with the below message. Now, everything works. Quote You can make the <a> element a block and set the background color on it instead of the div. Like this Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now