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

Question

详情

当我将鼠标悬停在 div 上时，我想扩展
我的菜单是这样布置的

这是我设置菜单样式的方式

/*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

Answer 1

第一件事：尝试添加边界线以查看发生了什么。第二：将你的身高设置为 auto.

Answer 2

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

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

尝试运行下面的片段

<!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>

Answer 3

类似于...

#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> 的 children，因此 parent 元素的宽度也会自动增加（以适应不断增长的 child).这可能会导致其他元素被推来推去（并且菜单的背景颜色会扩展）。

只需将 <ul> 的背景颜色设置为 transparent、none 或与其 parent 元素相同的颜色即可修复背景，然后设置背景适用于所有 <li> 的规则中的颜色 -- 这样当 none 扩展时，您只会看到 child 元素的背景随之增长。

要修复 parent <ul> 元素的增长，可能需要在 parent 上使用溢出属性以及（可能）z-indexes and/or 位置属性，例如 'absolute'（具有必要的偏移量以使其位置正确显示）用于 children.

Answer 4

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

Answer 5

如果我理解正确，请不要使用，但您按照 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>

Answer 6

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

1- 你应该将 class 应用到你的 li 标签，并且它应该是这个 class' 的宽度被 css 改变了。

2- 确保你的 CSS 在你试图覆盖的那个之后，并且 !important 不是必需的，除非它使用 !important，这是不好的......

3- 你在粘性标签中定义的大部分内容都是相同的，使用 class="sticky sticky-US" 将它们集中起来，并在 .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

Answer 7

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

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

.sticklr li {
  width: 125px;
}

..

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

.something {
  display: inline-block;
  background: yellow;
}

<div class="something">
  
  <ul id="sticky" class="sticklr">
    <li>
      <a href="#"></a>
    </li>
  </ul>
  
</div>

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

How to extend the width of the div when hover?

html

css

详情

我试过的

JSFiddle