悬停状态:在无序列表

时间:2016-03-24 11:24:26

标签: html css

我有一个无序列表。我创造了一个方形的形状作为前形状。但是我试图改变它的颜色,同时将<li>的文字悬停到目前为止没有任何结果,任何建议?谢谢!

HTML

<nav class="menu-vertical">
        <ul>
            <li><a href="">NEWS</a></li>
            <li><a href="">REVIEWS</a></li>
            <li><a href="">MAGAZINE</a></li>
            <li><a href="">PODCAST</a></li>
        </ul>
 </nav>

CSS

.menu-vertical ul {
list-style-type: none;
margin-left:  20px;
margin-right: 20px;
padding: 0;
width: auto;
background-color: #f1f1f1;
font-family: 'Open Sans', sans-serif;
}

.menu-vertical ul li {
list-style: none;
}

.menu-vertical ul li:before {
content:"";
width: 10px;
height: 10px;
vertical-align:middle;
background-color: fuchsia;
position: absolute;
margin-top:6px;
transition: background-color 0.2s ease-in-out;
transition: text-decoration 0.2s ease-in-out;

}

.menu-vertical ul li a {
display: block;
color: #000;
padding-left: 20px;
padding-bottom: 10px;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease-in-out;
}

.menu-vertical ul li a:hover {
color: #36b3d5;
text-decoration: underline;
}

我正在努力做到这一点:

.menu-vertical ul li:before a:hover但无效:(

2 个答案:

答案 0 :(得分:2)

试试这个:

DataTable dt = new DataTable();
chart1 = new Chart();
SqlConnection con = new SqlConnection();
con.ConnectionString = "connectionString";
con.Open();
string sql = "Select * from tablename ";
SqlCommand cmd = new SqlCommand(sql, con);
cmd.CommandType = CommandType.Text;
SqlDataAdapter sa = new SqlDataAdapter();
sa.SelectCommand = cmd;
sa.Fill(dt);
con.Close();
chart1.Series.Clear();
chart1.Series.Add("new");
chart1.Series["new"].ChartType = SeriesChartType.Candlestick;
chart1.Series["new"].XValueType = ChartValueType.Int32;
chart1.Series["new"].XValueMember = "Xval";
chart1.Series["new"].YValueType = ChartValueType.Int32;
chart1.Series["new"].YValueMembers = "High, Low, Open, Close";
chart1.DataSource = dt;
chart1.DataBind();
dataGridView1.DataSource=dt;
chart1.Series["new"].BorderColor = System.Drawing.Color.Black;
chart1.Series["new"].Color = System.Drawing.Color.Black;
chart1.Series["new"].CustomProperties = "PriceDownColor=Green,
PriceUpColor=Red";
chart1.ChartAreas.Clear();
chart1.ChartAreas.Add("newArea");
chart1.ChartAreas["newArea"].Axes[0].Title = "Date";
chart1.ChartAreas["newArea"].AxisX.LabelStyle.IntervalType = DateTimeIntervalType.Number;
chart1.ChartAreas["newArea"].AxisX.MajorGrid.LineWidth = 1;             
chart1.ChartAreas["newArea"].AxisY.MajorGrid.LineWidth = 1;             
chart1.ChartAreas["newArea"].AxisY.Minimum = 0;             
chart1.ChartAreas["newArea"].AxisY.Maximum = 210;             
chart1.DataManipulator.IsStartFromFirst = false;

See this fiddle

答案 1 :(得分:1)

您必须添加另一个CSS规则:

.menu-vertical ul li:hover:before {
    background-color: #36b3d5;
}