悬停时如何扩展div的宽度？

时间：2015-01-08 18:16:56

标签： html css css3

详细

  • 当我将鼠标悬停在它们上面时，我想扩展div的宽度
  • 我的菜单布局如此

enter image description here

以下是我设置菜单的方式

/*Sticky*/

.sticky-AS{

    font-size: 15px !important;
    color: orange !important;
    text-decoration: none !important;
    background-color : transparent !important;


}
.sticky-EU{

    font-size: 15px !important;
    color: #50c0de !important;
    text-decoration: none !important;
    background-color : transparent !important;


}
.sticky-NA{

    font-size: 15px !important;
    color: red !important;
    text-decoration: none !important;
    background-color : transparent !important;


}
.sticky-OC{

    font-size: 15px !important;
    color: #428bca !important;
    text-decoration: none !important;
    background-color : transparent !important;


}
.sticky-SA{

    font-size: 15px !important;
    color: #5cb85c !important;
    text-decoration: none !important;
    background-color : transparent !important;


}
.sticky-AF{

    font-size: 15px !important;
    color: #6E6E6E !important;
    text-decoration: none !important;
    background-color : transparent !important;


}

我尝试了什么

  • 注意：我试图强制将宽度设置为700像素，但它不起作用。

  • 但font-weight: bold;在我徘徊时工作。

  • 我想知道也许有人可以解释这一点。

以下是我如何设置悬停

的样式 
*Sticky*/
    .sticky-AS:hover{
        font-size: 15px !important;
        font-weight: bold;
        width: 700px !important;
        color: orange !important;
        text-decoration: none !important;
        background-color : transparent !important;
    }
    .sticky-EU:hover{
        font-size: 15px !important;
        font-weight: bold;
        width: 700px !important;
        color: #50c0de !important;
        text-decoration: none !important;
        background-color : transparent !important;
    }
    .sticky-NA:hover{
        font-size: 15px !important;
        font-weight: bold;
        width: 700px !important;
        color: red !important;
        text-decoration: none !important;
        background-color : transparent !important;
    }
    .sticky-OC:hover{
        font-size: 15px !important;
        font-weight: bold;
        width: 700px !important;
        color: #428bca !important;
        text-decoration: none !important;
        background-color : transparent !important;
    }
    .sticky-SA:hover{
        font-size: 15px !important;
        font-weight: bold;
        width: 700px !important;
        color: #5cb85c !important;
        text-decoration: none !important;
        background-color : transparent !important;
    }
    .sticky-AF:hover{
        font-size: 15px !important;
        font-weight: bold;
        width: 700px !important;
        color: #6E6E6E !important;
        text-decoration: none !important;
        background-color : transparent !important;
    }

对于有兴趣的人，并希望了解详情，这是我的PHP代码

<ul id="sticky" class="sticklr">

                <?php 

                    foreach(array_unique(array_values($continent)) as $continent_id){

                        if($continent_id == 1 ){ $continent_name = "Europe" ; $continent_code = "EU" ;  
                        }elseif ($continent_id == 2 ){ $continent_name = "Asia" ; $continent_code = "AS" ;    
                        }elseif ($continent_id == 3 ){ $continent_name = "North America" ; $continent_code = "NA" ;    
                        }elseif ($continent_id == 4 ){ $continent_name = "Oceania" ; $continent_code = "OC" ;   
                        }elseif ($continent_id == 5 ){ $continent_name = "South America" ; $continent_code = "SA" ;   
                        }else{  $continent_name = "Africa" ; $continent_code = "AF" ; }  

                        ?>

                        <li>
                            <a href="#<?php echo $continent_name ?>" class="sticky-<?php echo $continent_code ?>">
                                <?php echo $continent_name ?>
                            </a>
                        </li>
                <?php }?>
            </ul>

JSFiddle

7 个答案:

答案 0 :(得分：2)

最初，为Li内的所有标签定义宽度。

例如：#sticky li a{ width:200px; border:solid 2px red; display:block }

尝试运行bellow snippet

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
        .sticky-AS { font-size: 15px !important; color: orange !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-EU { font-size: 15px !important; color: #50c0de !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-NA { font-size: 15px !important; color: red !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-OC { font-size: 15px !important; color: #428bca !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-SA { font-size: 15px !important; color: #5cb85c !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-AF { font-size: 15px !important; color: #6E6E6E !important; text-decoration: none !important; background-color: transparent !important; }




        .sticky-AS:hover { font-size: 15px !important; font-weight: bold; width: 700px !important; color: orange !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-EU:hover { font-size: 15px !important; font-weight: bold; width: 700px !important; color: #50c0de !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-NA:hover { font-size: 15px !important; font-weight: bold; width: 700px !important; color: red !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-OC:hover { font-size: 15px !important; font-weight: bold; width: 700px !important; color: #428bca !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-SA:hover { font-size: 15px !important; font-weight: bold; width: 700px !important; color: #5cb85c !important; text-decoration: none !important; background-color: transparent !important; }
        .sticky-AF:hover { font-size: 15px !important; font-weight: bold; width: 700px !important; color: #6E6E6E !important; text-decoration: none !important; background-color: transparent !important; }

        #sticky li a { width: 200px; border: solid 2px red; display: block; }
    </style>

</head>
<body>

    <div style="width:200x; background-color:yellow">
        <ul id="sticky" class="sticklr">


            <li>
                <a href="#<?php echo $continent_name ?>" class="sticky-AS">
                    INDIA
                </a>
            </li>
            <li>
                <a href="#<?php echo $continent_name ?>" class="sticky-EU">
                    USA
                </a>
            </li>

            <li>
                <a href="#<?php echo $continent_name ?>" class="sticky-NA">
                    CANADA
                </a>
            </li>

        </ul>

    </div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

首先：尝试添加边框线以查看正在发生的事情。第二：将你的身高设置为auto。

答案 2 :(得分：0)

有些事情...... 

#sticky {
    height:
    width:
    overflow:
    etc.
}

#sticky li {
    background-color: transparent;
    font-size: 15px; /* could set this on the <ul> and <li>'s will inherit */
    text-decoration: none;
}
.sticky-AS { color: orange; }
.sticky-EU{ color: #50c0de; }
.sticky-NA{ color: red; }
.sticky-OC{ color: #428bca; }
.sticky-SA{ color: #5cb85c; }
.sticky-AF{ color: #6E6E6E; }

#sticky li:hover { width: increased-amount }

请注意，由于<li>元素是<ul>的子元素，因此父元素的宽度也会自动增加（以适应成长中的孩子）。这可能会导致其他元素被推动（菜单的背景颜色扩大）。

仅通过将<ul>的背景颜色设置为透明，无或与父元素相同来修复背景，然后在适用于所有<li> s的规则中设置背景颜色 - - 这样，当没有扩展时，你只会看到子元素的背景随之增长。

要修复父<ul>元素的增长，可能还需要在父元素上使用overflow属性以及（可能）z-index和/或位置属性，如'absolute'（必要时）为儿童提供偏移以使其位置正确显示。

答案 3 :(得分：0)

您试图更改固有内联的锚元素的宽度。使用display:block将它们渲染为块级元素。然后你可以改变宽度。小提琴为第一个元素编辑：http://jsfiddle.net/92u4cute/2/

答案 4 :(得分：0)

如果我理解正确但你按照css规则添加li元素，那就不行了。

ul li:hover {
    background: silver;
}

ul li {
    width: 100px;
}


	/*Sticky*/
	.sticky-AS {
	  font-size: 15px !important;
	  color: orange !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-EU {
	  font-size: 15px !important;
	  color: #50c0de !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-NA {
	  font-size: 15px !important;
	  color: red !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-OC {
	  font-size: 15px !important;
	  color: #428bca !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-SA {
	  font-size: 15px !important;
	  color: #5cb85c !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-AF {
	  font-size: 15px !important;
	  color: #6E6E6E !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	/*Sticky*/
	.sticky-AS:hover {
	  font-size: 15px !important;
	  font-weight: bold;
	  width: 700px !important;
	  color: orange !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-EU:hover {
	  font-size: 15px !important;
	  font-weight: bold;
	  width: 700px !important;
	  color: #50c0de !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-NA:hover {
	  font-size: 15px !important;
	  font-weight: bold;
	  width: 700px !important;
	  color: red !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-OC:hover {
	  font-size: 15px !important;
	  font-weight: bold;
	  width: 700px !important;
	  color: #428bca !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-SA:hover {
	  font-size: 15px !important;
	  font-weight: bold;
	  width: 700px !important;
	  color: #5cb85c !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	.sticky-AF:hover {
	  font-size: 15px !important;
	  font-weight: bold;
	  width: 700px !important;
	  color: #6E6E6E !important;
	  text-decoration: none !important;
	  background-color: transparent !important;
	}
	ul li:hover {
	  background: silver;
	}
	ul li {
	  width: 100px;
	}
	
<ul id="sticky" class="sticklr">
  <li>	<a href="#Europe" class="sticky-EU">Europe</a>

  </li>
  <li>	<a href="#Asia" class="sticky-AS">Asia</a>

  </li>
  <li>	<a href="#North America" class="sticky-NA">
								North America							</a>

  </li>
  <li>	<a href="#Oceania" class="sticky-OC">
								Oceania							</a>

  </li>
  <li>	<a href="#South America" class="sticky-SA">
								South America							</a>

  </li>
  <li>	<a href="#Africa" class="sticky-AF">
								Africa							</a>

  </li>
</ul>

答案 5 :(得分：0)

有些事情我建议你改变你的设计（我会评论，但我需要50个代表......）：

1-你应该为你的li标签申请一个课程，它应该是这个课程＆＃39;由css更改的宽度。

2-确保您的CSS位于您试图覆盖的CSS之后！重要的不应该是必要的，除非它使用！important，这很糟糕......

3-您在粘性标签中定义的大部分内容都是相同的，使用class =＆＃34; sticky sticky-US＆＃34;并在.sticky中定义重复的东西。这将使得知道什么是

变得简单

在我的示例中，添加了边框和背景以便于演示

CSS：

    /*Sticky*/
    .sticky {
        font-size: 15px !important;
        border: 1px solid red;
        width: 60px;
        background-color : grey;

    }
.sticky a {
    text-decoration: none !important;
}
    .sticky-AS{
        color: orange !important;       
    }
    .sticky-EU{
        color: #50c0de !important;      
    }

    /*Sticky*/
    .sticky:hover {
        width:200px;
    font-size: 15px !important;
        font-weight: bold;

    }

html：

<ul id="sticky" class="sticklr">


                        <li class="sticky">
                            <a href="#Europe" class="sticky-EU">
                                Europe                          </a>
                        </li>

                        <li class="sticky">
                            <a href="#Asia" class="sticky-AS">
                                Asia                            </a>
                        </li>
                            </ul>

fiddle

答案 6 :(得分：0)

为了实际更改容器的宽度，可能是我在下面添加的<div>，您需要将其设置为display: inline-block;，告诉它假定其宽度儿童。转到实际列表时，只需将<li>的宽度设置为默认值，然后在li:hover上增加<li>的宽度。检查下面的剪辑！

一个工作示例： http://jsfiddle.net/hz67xywg/1/

＆＃13;
＆＃13; 
.sticklr li {
  width: 125px;
}

..

.sticklr li:hover {
  font-weight: bold;
  width: 135px;
}

.something {
  display: inline-block;
  background: yellow;
}
＆＃13; 
<div class="something">
  
  <ul id="sticky" class="sticklr">
    <li>
      <a href="#"></a>
    </li>
  </ul>
  
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题