Question

以下是我正在使用的HTML和CSS。不幸的是，已经提出的问题没有给出答案。基本上它减少了所有兄弟姐妹的宽度并增加了悬停的兄弟姐妹的宽度。我使用ease-in-out但过渡的OUT部分瞬间跳回原来的状态。

＆＃13;

html {
  background: #000066;
}
body {
  height: 100%;
  background: #cfcfd0;
  margin: 4% 4% 4% 4%;
}
#title {
  background: ;
  text-align: center;
  margin: 2% 2%;
  padding: 2% 2%;
}
#nav {
  width: 90%;
  overflow: auto;
  margin: 0 auto;
  padding: 0px 0px 0px 0px
}
ul {
  margin: 4% auto;
  padding: 0;
  width: 100%;
  list-style-type: none;
  overflow: auto;
}
li {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  float: left;
  width: 33.33%;
  padding: 2% 0;
  margin: 0%;
  background: blue;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
li:first-child {
  border-left: 1px solid black;
}
li:last-child {
  border-right: 1px solid black;
}
a {
  color: black;
  text-decoration: none;
}
ul:hover > li:hover {
  width: 37.33%;
  color: white;
  background: darkblue;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
ul:hover > li {
  width: 31.33%;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

＆＃13;

<div id="title">
  <h1>Projects Home</h1>
</div>
<div id="nav">
  <ul>
    <li><a href="">Project 1</a>
    </li>
    <li><a href="">Project 2</a>
    </li>
    <li><a href="">Project 3</a>
    </li>
  </ul>
</div>

＆＃13;

我无法弄清楚为什么会这样。

Answer 1

将app.get('/:username', function(){ //look up user profile data from db and render the page });上的>移至ul:hover > li：

＆＃13;

ul:hover li

＆＃13;

html {
  background: #000066;
}
body {
  height: 100%;
  background: #cfcfd0;
  margin: 4% 4% 4% 4%;
}
#title {
  background: ;
  text-align: center;
  margin: 2% 2%;
  padding: 2% 2%;
}
#nav {
  width: 90%;
  overflow: auto;
  margin: 0 auto;
  padding: 0px 0px 0px 0px
}
ul {
  margin: 4% auto;
  padding:0;
  width: 100%;
  list-style-type: none;
  overflow: auto;
}
li {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  float:left;
  width: 33.33%;
  padding: 2% 0;
  margin: 0%;
  background: blue;
  border-top:  1px solid black;
  border-bottom:  1px solid black;
  border-right: 1px solid black;
}
li:first-child {
  border-left: 1px solid black;
}
li:last-child {
  border-right: 1px solid black;
}   
a {
  color: black;
  text-decoration: none;
}
ul:hover > li:hover{
  width: 37.33%;
  color: white;
  background: darkblue;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
ul:hover li {
  width: 31.33%;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

＆＃13;

Answer 2

只有匹配选择器时，才会将任何CSS属性应用于元素。在transition选择器下指定:hover属性时，只有在悬停开启时才会自然应用它们。当我们将鼠标悬停时，它们会快速恢复，因为transition设置不再适用于该元素。

在您的情况下，由于transition仅在ul:hover > li:hover和ul:hover > li中指定，因此仅当鼠标位于li或鼠标至少时才会应用ul li（即当我们在ul边界内时从transition移动到另一个li时。

要让html { background: #000066; } body { height: 100%; background: #cfcfd0; margin: 4% 4% 4% 4%; } #title { background: ; text-align: center; margin: 2% 2%; padding: 2% 2%; } #nav { width: 90%; overflow: auto; margin: 0 auto; padding: 0px 0px 0px 0px } ul { margin: 4% auto; padding: 0; width: 100%; list-style-type: none; overflow: auto; } li { box-sizing: border-box; text-align: center; display: inline-block; float: left; width: 33.33%; padding: 2% 0; margin: 0%; background: blue; border-top: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } li:first-child { border-left: 1px solid black; } li:last-child { border-right: 1px solid black; } a { color: black; text-decoration: none; } ul:hover > li:hover { width: 37.33%; color: white; background: darkblue; } ul:hover > li { width: 31.33%; }在鼠标移出期间正常工作，应该在<div id="title"> <h1>Projects Home</h1> </div> <div id="nav"> <ul> <li><a href="">Project 1</a> </li> <li><a href="">Project 2</a> </li> <li><a href="">Project 3</a> </li> </ul> </div>选择器中指定，如下面的代码段所示。

＆＃13;

var app = require('express');
var router  = app.Router();

    module.exports = function(app, io) {

        app.get('/profile',function(req, res){
            res.render('profile.ejs');
        });
        io.on('connection', function(socket){
            socket.on('chat message', function(msg){
                io.emit('chat message', msg);
            });
        });
        return router;
    };

＆＃13;

// socket.io
var server   = require('http').Server(app);
var io       = require('socket.io')(server);
require('./app/content')(app, io);

＆＃13;

CSS宽度过渡不起作用

2 个答案: