Question 251799 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – CSS – Background transition on hover not working

I want black and transparent linear gradient as background of my li but for some reason transition property is not working on hover. It works if I use box shadow.

.mfp-con ul {
    list-style: none;
    padding: 0; /* Remove default padding on the ul element */
}

.mfp-con ul li {
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.mfp-con ul li:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.363), transparent 30%);
}


/* Other styles */

.mfp-con {
    display: flex;
    flex-direction: column;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: rgb(73, 40, 221);
    width: 100%;
}

.mfp-con ul {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
}

.mfp-con ul > * {
    padding: 8px 10px;
    margin: 0px 2px;
    color: white;
    font-size: 1rem;
    font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    cursor: pointer;
}
        <div class="mfp-con">
            <ul>
                <li>Intro</li>
                <li>Physics</li>
                <li>Chem</li>
                <li>Linear Algebra</li>
                <li>Social Sciences</li>
                <li>Ethics</li>
                <li>Outro</li>
                <button>></button>
            </ul>

            <div class="mfp-content">

            </div>
        </div>
Tags:

2

Answers


  1. 0

    try that ->

    .mfp-con ul li {
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}
    Login or Signup to reply.
  2. 0

    Most likely, this is your menu, so <li> will contain <a>, and therefore you can change the color in <li> on :hover, and in background: linear-gradient, specify currentColor.
    But, of course, the easiest way to do this is with :before or :after pseudo-elements…

    .mfp-con {
  display: flex;
  flex-direction: column;
  border-radius: 10px 10px 0 0;
  background-color: rgb(73, 40, 221);
}

.mfp-con ul {
  list-style: none;
  padding: 0;
  font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  white-space: nowrap;
}

.mfp-con ul li {
  color: rgba(0, 0, 0, 0);
  transition: .5s ease-in-out;
  background: linear-gradient(to top, currentColor, transparent 30%);
  margin: 0 2px;
}

.mfp-con ul li:hover {
  color: rgba(0, 0, 0, 0.363);
}

.mfp-con ul li a{
  display: block;
  color: white;
  padding: 8px 10px;
  text-decoration: none;
}
    <div class="mfp-con">
  <ul>
    <li><a href="#">Intro</a></li>
    <li><a href="#">Physics</a></li>
    <li><a href="#">Chem</a></li>
    <li><a href="#">Linear Algebra</a></li>
    <li><a href="#">Social Sciences</a></li>
    <li><a href="#">Ethics</a></li>
    <li><a href="#">Outro</a></li>
    <button>></button>
  </ul>
  <div class="mfp-content"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search