Hover Effect der Maus folgen

Hover Effect der Maus folgen

Beitragvon Music2Load » 28.09.2010, 21:48

Hallo,
ich hab ein Script bekommen, habe nun ein Design was angepasst ist.
Nur bei dem alten Design hat der MouseOver Effect wunderbar geklappt und ist der Maus gefolgt.
Bei dem neuen Design geht der MouseOver Effect nur nach oben und unten, aber nicht mehr Links Rechts.
Das ist die CSS File vom alten Design:
Code: Alles auswählen
#content { 
  background-repeat:repeat-y; 
  width: 810px; 
  vertical-align: top;
  margin: auto;
}

.content_container {
  background: transparent;
  vertical-align: top;
  margin: auto;
  text-align: center;
  padding: 0% 0%;
  width: 790px;
}

.openpanel {
  background: url('images/footer.gif') no-repeat transparent top;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #FFF;
  margin: 0 0 0 0px;
}

div.bg {
  background: url('images/bg-navi.png') no-repeat transparent top;
  margin: 0 0 0 -20px;
}

.paneltitle {
  float: left;
  height: 30px;
  line-height: 30px;
  margin: 0 0 0 20px;
}

body{
    margin:0px;
    background:url('images/background.gif');
    font-family:verdana;
    font-size:12px;
}

#root {
    width: 830px;
    margin: 0 auto;
}

a {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
    text-decoration:none;
}

a:hover {
    color:#0184ff;
}

img {
    border: none;
}

div.list1 { 
    font-size: 11px; 
    text-align: left; 
    color:#000; 
    border-bottom: 1px solid #b5b5b5; 
    padding: 3px; 
    height: 17px;
    background:#FFFFFF;
}

div.list1 a {
  color: #212121;
  text-decoration: none;
  font-weight: normal;
}

div.list1 a:hover {
  color: #103848;
  text-decoration: underline;
  font-weight: normal;
}

div.list1:hover {
  font-size: 11px;
  border-bottom: 1px solid #b5b5b5;
  padding: 3px;
  height: 17px;
  background: #4b95b2;
}

div.list2 { 
    font-size: 11px; 
    text-align: left; 
    color:#000; 
    border-bottom: 1px solid #b5b5b5; 
    padding: 3px; 
    height: 17px; 
    background:#d2dadc;
}

div.list2 a {
  color: #212121;
  text-decoration: none;
  font-weight: normal;
}

div.list2 a:hover {
  color: #103848;
  text-decoration: underline;
  font-weight: normal;
}

div.list2:hover {
  font-size: 11px;
  border-bottom: 1px solid #b5b5b5;
  padding: 3px;
  height: 17px;
  background: #4b95b2;
}


Das ist die neue, bei der es nicht mehr geht:
Code: Alles auswählen
a:link, a:visited {
    color:#841917;
}


#cbody {
    background: url(images/cbg.gif) repeat-y;
    width: 898px;
    padding: 0 0 100px
}

#content {
    background: #fff;   
    float: left;
    padding: 4px 4px;
    width: 665px;
    z-index: 1
}

#content .games {
    background: url(images/new/games.png)
}

#content .movies {
    background: url(images/new/movies.png)
}

#content .music {
    background: url(images/new/music.png)
}

#content .new {
    padding: 0;
    z-index: 1
}

.list1 {
    background: #f6f6f6;
    font-size: 11px;   
    height: 23px; 
    line-height:20px;
    overflow:hidden;
    width:660px;
    padding:0px 2px 0px;
}

.list1 a {
    color: #841917;
    font-weight: 700;
    text-decoration: none
    }

.list2 {
    background: #dedede;
    font-size: 11px; 
    height: 23px; 
    line-height:20px;
    overflow:hidden;
    width:660px;
    padding:0px 2px 0px;
}

.list2 a {
    color: #841917;
    font-weight: 700;
    text-decoration: none
}

#content .short {
    margin: 38px 0 3px
}

#content .software {
    background: url(images/new/software.png)
}

#content .top {
    background: #881B19 url(images/new/topbg.gif) repeat-x;
    height: 33px;
    width: 660px;
    overflow:hidden;
    line-height:30px;
    font-family: Tahoma;
    padding-left:5px;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
}

#content .top a {
    text-decoration:none;
    color: #fff;
}

#content .xxx {
    background: url(images/new/xxx.png)
}


#footer .subnavi {
    height: 40px;
    margin: 25px 0 0 30px;
    width: 858px
}

#footer .subnavi .up a {
    background: url(images/footer/up.gif) center right no-repeat;
    padding: 0 20px 0 0
}

#footer .subnavi li {
    float: left;
    list-style-type: none;
    margin: 0 33px 0 0
}

#footer .subnavi li a {
    color: #fff;
    font-weight: 700;
    text-decoration: none
}

#header {
    background: url(images/head/head.png);
    height: 329px;
    margin: 0 0 0 -184px;
    width: 1082px
}

#header .collectr a {
    background: url(images/head/collectr.png);
    display: block;
    float: left;
    height: 98px;
    width: 76px
}

#header .extsearch {
    float: left;
    margin: 0px 0 0 50px;
    width: 120px
}

#header .extsearch a {
    color: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: 700;
    text-decoration: none
}

#header .hnews {
    color: #fff;
    float: left;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    margin: 0px 0 0 200px;
    width: 700px
}

#header .hnews b {
    color: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: 700
}

#header .menu {
    margin: 71px 0 0 91px;
    padding: 0
}

#header .menu .board a {
    background: scroll url(images/head/menu_board.jpg) -0 -0;
    display: block;
    height: 52px;
    width: 76px
}

#header .menu .board a:hover {
    background: scroll url(images/head/menu_board.jpg) -0 -52px
}

#header .menu .contact a {
    background: scroll url(images/head/menu_contact.png) -0 -0;
    display: block;
    height: 52px;
    width: 95px
}

#header .menu .contact a:hover {
    background: scroll url(images/head/menu_contact.png) -0 -52px
}

#header .menu .faq a {
    background: scroll url(images/head/menu_faq.png) -0 -0;
    display: block;
    height: 52px;
    width: 64px
}

#header .menu .faq a:hover {
    background: scroll url(images/head/menu_faq.png) -0 -52px
}

#header .menu .home a {
    background: scroll url(images/head/menu_home.png) -0 -0;
    display: block;
    height: 52px;
    width: 99px
}

#header .menu .home a:hover {
    background: scroll url(images/head/menu_home.png) -0 -52px
}

#header .menu .news a {
    background: scroll url(images/head/menu_news.png) -0 -0;
    display: block;
    height: 52px;
    width: 152px
}

#header .menu .news a:hover {
    background: scroll url(images/head/menu_news.png) -0 -52px
}

#header .menu .partner a {
    background: scroll url(images/head/menu_partner.png) -0 -0;
    display: block;
    height: 52px;
    width: 84px
}

#header .menu .partner a:hover {
    background: scroll url(images/head/menu_partner.png) -0 -52px
}

#header .menu .upload a {
    background: scroll url(images/head/menu_upload.png) -0 -0;
    display: block;
    height: 52px;
    width: 158px
}

#header .menu .upload a:hover {
    background: scroll url(images/head/menu_upload.png) -0 -52px
}

#header .menu li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0
}

#header .search {
    background: url(images/head/search.gif);
    border: 0;
    color: #000;
    font-family: Tahoma;
    font-size: 12px;
    height: 15px;
    margin: 14px 11px;
    padding: 5px;
    width: 139px
}

#header .vote a {
    background: url(images/head/vote.png);
    display: block;
    float: left;
    height: 98px;
    margin: 0 0 0 566px;
    width: 98px
}

#sidebar {
    background: #7c0000;
    float: left;
    margin: 0 6px 0 0;
    width: 219px;
    z-index: 3
}

#sidebar .bookmark {
    background: url(images/sidebar/bookmark.jpg)
}

#sidebar .box {
    height: 29px;
    margin: 0 0 0 -9px;
    width: 228px
}

/*#sidebar .cat a{display:block;height:49px;width:219px}*/
#sidebar .cbox {
    background: #f6f6f6;
    padding: 5px;
    width: 209px;
    text-align: center;
}

#sidebar .collectr {
    background: url(images/sidebar/collectr.jpg)
}

#sidebar .fbox {
    padding: 5px 5px 100px;
    text-align: center;
}

#sidebar .cat a {
    background: url(images/sidebar/catbg.png);
    background-position:center;
    height: 25px;
    width: 219px;
    display:block;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    padding: 12px 0 0
}

#sidebar .gamescat {
    background: url(images/sidebar/gamescat.jpg)
}

#sidebar .gamesform {
    background: url(images/sidebar/gamesform.jpg)
}

#sidebar .menu {
  list-style-type: none;
    margin: 0;
    padding: 0
   
}

#sidebar .menu li a {
    background: url(images/sidebar/button.jpg);
    color: #841917;
    display: block;
    font-weight: 700;
    height: 25px;
    line-height: 25px;
    text-align: center;
    text-decoration: none;
    width: 219px
}

#sidebar .moviescat {
    background: url(images/sidebar/moviescat.jpg)
}

#sidebar .moviesform {
    background: url(images/sidebar/moviesform.jpg)
}

#sidebar .musiccat {
    background: url(images/sidebar/musiccat.jpg)
}

#sidebar .partner {
    background: url(images/sidebar/partner.jpg)
}

#sidebar .softwarecat {
    background: url(images/sidebar/softwarecat.jpg)
}

#sidebar .vote {
    background: url(images/sidebar/vote.jpg)
}

#sidebar .xxxcat {
    background: url(images/sidebar/xxxcat.jpg)
}

#sidebar .xxxform {
    background: url(images/sidebar/xxxform.jpg)
}

#top10 {
    background: url(images/top10/bg.gif) repeat-x;
    height: 137px;
    margin: -65px 0 7px;
    width: 898px
}

#top10 .cover {
    margin: 0;
    padding: 0 0 0 35px
}

#top10 .cover li {
    background: url(images/top10/coverbg.gif);
     float: left;
    height: 119px;
    list-style-type: none;
    margin: 5px 0 5px 3px;
    padding: 4px;
    width: 84px
}

#top10 .desc {
    background: url(images/top10/desc.gif);
    display: block;
    float: left;
    height: 127px;
    margin: 4px;
    width: 29px
}

body {
    background: #2a2118;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    margin: 0 auto;
    width: 898px
}
img {
    border:0px;
}
img, div, ul, li {
    behavior: url(iepngfix.htc)
}

.contentcore {
  background: transparent;
  vertical-align: top;
  margin: auto;
  padding: 0% 0%;
  width: 660px;
}
.contenttitle {
  background: url(images/table.png) no-repeat transparent top;
  width: 660px;
  height: 24px;
  line-height: 24px;
  color: #FFF;

}
.detailflag {
  float: left;
  margin: 5px 0 0 5px;
}
.detailtitle_l {
  float: left;
  height: 22px;
  line-height: 22px;
  margin: 0 0 0 5px;
}
.detailtitle_r {
  float: right;
  height: 22px;
  line-height: 22px;
  margin: 0 5px 0 0;
}
.detailtitle_c {
  width: 100%;
  text-align: center;
  height: 22px;
  line-height: 22px;
  margin: 0 0 0 5px;
}
.listdetail1 {
  background: #FFF;
  border: 1px solid #b5b5b5;
  padding: 3px;
  height: 20px;
}
.listdetail2 {
  background: top #DBDBDB;
  border: 1px solid #b5b5b5;
  padding: 3px;
  height: 20px;
}
.listdetailspecial {
  background: #ff8800;
  border: 1px solid #b5b5b5;
  padding: 3px;
  height: 20px;
}
.tableinnerlink {
  width: 100%;
  display: block;
  height: 100%;
}

.tablesheader a {
    color: #ffffff;
    text-decoration: underline;
}
.tablescenter a {
    color: #000000;
    text-decoration: underline;
}

.tablesheader {
    vertical-align: middle;
     height: 24px;
     border: solid 1px #b0b0b0;
    font-size: 12px;
    background-color: #ffffff;
    font-family:Tahoma;
    color: #333333;
}
.tablesfooter {
    vertical-align: middle;
     height: 24px;
     border: solid 1px #b0b0b0;
    font-size: 11px;
    background-color: #ffffff;
    font-family:Tahoma;
    color: #333333;
    padding:2px;
}
.tablescenter {
    border-left: solid 1px #b0b0b0;
    border-right: solid 1px #b0b0b0;
    border-bottom: none;
    border-top: none;
    color: #000000;
    font-size: 12px;
    background-color: #ffffff;
}
.mainDiv {
    border:solid 0px #666666;
    background:#ffffff;
    width:604px;
    padding:2px;
}
#content.faq {
    background: #fff;
    float: left;
    margin-top:4px;
    margin-left:0px;
    margin-bottom:0px;
    margin-right:0px;
    width: 665px;
    z-index: 1
}
.contentcore.faq {
  background: transparent;
  vertical-align: top;
    margin-top:4px;
    margin-left:0px;
    margin-bottom:0px;
    margin-right:0px;
  width: 655px;
}
.detail_faq2 {
  background: transparent;
  vertical-align: top;
    margin-top:4px;
    margin-left:8px;
    margin-bottom:0px;
    margin-right:0px;
  width: 655px;
}
.detail_faq3 {
  background: transparent;
  vertical-align: top;
    margin-top:4px;
    margin-left:0px;
    margin-bottom:0px;
    margin-right:0px;
  width: 660px;
}
.detail_faq2_content {
  background: transparent;
  vertical-align: top;
    margin-top:4px;
    margin-left:8px;
    margin-bottom:0px;
    margin-right:0px;
  width: 655px;
}
.detail_faq2_content2 {
  background: transparent;
  vertical-align: top;
    margin-top:4px;
    margin-left:2px;
    margin-bottom:0px;
    margin-right:2px;
  width: 660px;
}


Ich hoffe ihr könnt mir einen Tip geben was ich da machen kann.

Auf der Seite die fast das gleiche Script hat geht der MouseOver Effect perfekt: http://gmd-music.com

Danke MFG
Music2Load
neu hier
 
Beiträge: 1
Registriert: 28.09.2010, 21:33

Re: Hover Effect der Maus folgen

Beitragvon Azra » 29.09.2010, 07:05

Der dazu gehörende HTML Code oder eine Testseite wäre wunderbar.
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Hover Effect der Maus folgen"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste