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 do I display div's next to each other within a wrapper div?

    How to grouply select multi elements CSS?

    Bootstrap modal: how to fade in, but immediately disappear on close

    hyperlink inheriting color, how to overcome

    Hide one div when showing another with JavaScript

    How to transform xPath to CSS Selector

    How to make a div expand to right side of page and bottom of page [closed]

    How to override Inline Style CSS?

    How to use custom css with bootstrap css

    How can i include only custom css and js files in rails application

    How do you create a transparent overlay with text upon mouse hover?

    How to Make a materialize CSS button's width same as col s12?

    how to set break for print page(div) using css?

    How to make sure items are added to the end of a moving list?

    How to add a shadow for underline (bottom border) in css

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    CSS: How to center a bottom-fixed menu

    How to remove space between bannner and content in wordpress theme?

    Large white space below footer showing on certain pages on iPhone actual device but not emulator in Chrome

    How can I show a loading screen while a really large image is loading?

    How to avoid background image stretched horizontally with CSS?

    CSS: How to center text over an image, both always centered and proportional regardless of window size

    How do I achieve a hover over image effect?

    How can I create this complicated layout using only CSS?

    How to refer to third level lists in css?

    How to always refresh file loaded by ajax, avoiding cached file

    How to edit CSS file in Objective-C

    How i can remove gap between Menu Box

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to bind click event on image added using CSS 'background-image' property in jQuery