Results 1 to 3 of 3

Thread: Hover

  1. #1
    New user
    Join Date
    03-03-16.
    Posts
    1

    Default Hover

    Hey Guys, iam new too this world,
    I read a lot and i think iam not that bad
    but i need your help cause i get stucked in my brain right now

    i got a few Icons which needs to Hover / change background colour when Mouseover

    until now my css looks like this
    #container .iconbox a {
    margin-bottom:13px;
    display:block;
    text-transform:uppercase;
    color:#0e0e0e;
    font-size:11px;
    text-align:center;
    }
    #container .iconbox .image_container {
    display:block;
    width:110px;
    height:110px;
    margin:35px auto;
    border:10px solid #ededed;
    background-color:#ededed;
    line-height:1;
    color:#3e3e3e;
    text-align:center;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    }
    now i want to make a change of background colour to #f5b017 when mouse go over the icons but my brain smokes.....
    some can help me out of this ?
    thx
    Sven

  2. #2
    Community-Moderator xchs's Avatar
    Join Date
    06-19-09.
    Posts
    1,110

    Default

    Hi,

    there's a :hover selector that should do the trick: http://www.w3schools.com/cssref/sel_hover.asp
    Contao Community Moderator
    → Support options

  3. #3
    New user dimfried's Avatar
    Join Date
    02-29-16.
    Location
    Switzerland
    Posts
    10

    Default

    hi sven,

    this should be really simple.

    Code:
    .your-element {
       /*some code*/
    }
    
    .your-element:hover {
       /*some code on mouse over*/
    }
    I hope this is what you meant,

    cheers
    dimitri
    Last edited by dimfried; 03/03/2016 at 16:24.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •