How to make hover dynamic in CSS?


Tags: javascript,css,angularjs

Problem :

I'm using Angular v1.5.4. The project is a personal blog. Currently in the early prototyping stage.

Here is my use case: User hovers over button. If that button has the class 'active' applied to it (ng-class sets that button to active, or if the property 'clicked' is true in the JSON in the controller), make the hover color a nice blue. If that button is not currently active, make the button black (the color it is now).

The code I have now:

HTML:

 <div class="buttons" ng-controller="ButtonController as buttons">
    <ul>

       <li ng-repeat = "button in buttons.buttonsList"
           ng-class="{active: button.isClicked == true}"
           ng-click="button.isClicked = !button.isClicked">

         <p>{{button.name}}</p>

       </li>

    </ul>
  </div>

CSS:

li {
  float: left;
}

li p {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li:hover{
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

ButtonController.js:

function ButtonController() {
  this.buttonsList = [{
    name: 'Home',
    description: 'This button returns the user to the home page.',
    clicked: false
  },{
    name: 'Music',
    description: 'This button takes the user to a page where I write about music I like.',
    clicked: false
  }];
}

angular
  .module('app')
  .controller('ButtonController', ButtonController);

How do I make the li:hover CSS code dynamic based on the state of the button?



Solution :

Simply change your CSS to care about what the class is...

Change

li:hover{
  background-color: #111;
}

to

.active:hover{
  background-color: #111;
}

    CSS Howto..

    How can I put a inside of an ? [duplicate]

    How can I set a specific border around an element?

    How can I get as much of the text into a DIV row as possible?

    How to scale and center text vertically in a fluid layout? (using CSS)

    How to set div height to 100% of chosen print paper?

    Show some characters above a picture on hover

    How to CSS two vertical cylinders

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How does the arrival of HTML5 and CSS3 affect jQuery?

    How to set width of container with two div's [closed]

    How to center icons in div consistently? [duplicate]

    How to specify size of thumbnails for photos that are hosted externally?

    CSS : How can I add shadow to a label or box

    bootstrap - how to position text over responsive image

    how to wrap form elements within the div tag(with background-color) using twitter bootstrap and CSS

    How to make a frame around CSS component from a picture source

    Dompdf: how to get background image to show on first page only

    How do I get rid of the last tr td bottom border using css?

    How to create some elegant shadows in CSS [closed]

    How to fix text running off screen and breaking layout without using CSS word-break property?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    How to enable CSS editor features in VS 2012?

    How to make the text that are typed inside the input to appear into a seperate div

    How to make a image css not move at text?

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    How to keep the underline effect in this demo stay using CSS?

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    how to position a search bar in html/css

    on hover and on click how to fade out image and fade in content text

    How to hide part of css when input is empty?