Jump to content

How to style on anchor


newcoder1010

Recommended Posts

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

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

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

<!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

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

#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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...