Hover in CSS

  • Resolved samtazbu

    (@samtazbu)


    8 years, 12 months ago

    Dear Ben,

    I hope this finds you well!

    I am finally getting a better idea of how to do small things in CSS.

    I am trying to create a CSS code for some of my links with hover, for which I was using image blocks and a plugin so far.

    See the following page:

    https://www.samvriti.com/tests-hover-css/

    First half: images + plugin. Second half: CSS.

    The CSS have I used:

    .background-switch {
  text-align: center;
  max-width: 300px;
  margin-left: auto ;
  margin-right: auto ;
  padding: 1em;
  border-radius: 30px;
  border: 1px solid #f4f4f4;
  background-color: white;
}

.background-switch:hover {
  color: #7B7B7B;
  background-color: #141414;
  transition: width 2s;
  transition-timing-function: linear;
}

    A few things I am not yet able to figure out:

    – Which exact tag am I to add to make the whole block as link (and then possibly adding further css functions for link, visited, over, active), instead of the text within? And/or, to cancel the hover style for text, if this text is placed in this background hover change?

    – How to apply at once a flexible width, which would define itself according to the length of the text each time, but also so that the whole background remains centered in the page? It seems it is either/or with the present code ( margin-left: auto ; and margin-right: auto ; seem to require a fixed max-width).

    Thanks Ben !

    Samuel

Viewing 5 replies - 16 through 20 (of 20 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey Samuel,

    The property is color, rather than font-color. If you change the property name it should work right away.

    Thread Starter samtazbu

    (@samtazbu)

    Hey Ben,

    Thanks – I corrected the mistake. But I still don’t see a difference… The colour seems still like grey, rather than slightly light black.

    See for instance the difference between the images, and then the links in css:

    https://www.samvriti.com/tests-hover-css/

    What do you think can be done?

    Thanks!

    Samuel

    Theme Author Ben Sibley

    (@bensibley)

    Okay I see what’s happening. Your CSS is being overridden by this CSS in Tracks:

    .entry-content a {
  color: #606060;
}

    That CSS has a higher specificity score, so it takes precedence. You can update your selector to this to override it:

    .entry-content .button-link-fixed {...}

    entry-content is a container that holds the content in the post, so it will apply just the same. The difference is that it now has the same first selector, and your .button-link-fixed class is more specific than a plan a selector so it will override it.

    Thread Starter samtazbu

    (@samtazbu)

    Great! Thanks Ben for the fix and the insighftul explanation. Thanks once again!

    Theme Author Ben Sibley

    (@bensibley)

    Happy to help ??

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Hover in CSS’ is closed to new replies.