添加到子菜单的转换

时间：2017-04-19 11:19:48

标签： jquery html css

帮我添加到子菜单的转换。虽然我尝试过使用转换，但它没有用。我想在鼠标悬停时发生转换。

非常感谢任何帮助。

以下是代码：

CSS部分：

using System;
using System.Collections.Generic;
using AppKit;
using Foundation;
using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
using OxyPlot.Xamarin.Mac;

namespace OxyPlotTest
{
    public partial class ViewController : NSViewController
    {
        List<HighLowItem> bars;

        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            bars = new List<HighLowItem>();

            PlotView plotView = new PlotView(viewCtrl.Frame);

            PlotModel model = new PlotModel { };

            model.TrackerChanged += OnTrackerChanged;
            model.MouseMove += onSeriesMouseMove;

            model.Axes.Add(new DateTimeAxis
            {
                Position = AxisPosition.Bottom,
                MajorGridlineStyle = LineStyle.Dot,
                MinorGridlineStyle = LineStyle.Dot,
            });

            model.Axes.Add(new LinearAxis
            {
                Position = AxisPosition.Left,
                MajorGridlineStyle = LineStyle.Dot,
                MinorGridlineStyle = LineStyle.Dot,
            });

            CandleStickSeries cs = new CandleStickSeries()
            {
                IncreasingFill = OxyColors.DarkGreen,
                DecreasingFill = OxyColors.Red,
                DataFieldX = "X",
                DataFieldHigh = "High",
                DataFieldLow = "Low",
                DataFieldOpen = "Open",
                DataFieldClose = "Close",
                TrackerFormatString = "High: {2:0.00}\nLow: {3:0.00}\nOpen: {4:0.00}\nClose: {5:0.00}",
                ItemsSource = bars

            };

            cs.MouseMove += OnCSMouseMove;

            model.Series.Add(cs);
            plotView.Model = model;

            viewCtrl.AddSubview(plotView);

            bars.Add(new HighLowItem(DateTimeAxis.ToDouble(DateTime.Now), 10, 2, 5, 8));
            bars.Add(new HighLowItem(DateTimeAxis.ToDouble(DateTime.Now.AddMinutes(1)), 15, 6, 8, 11));
            bars.Add(new HighLowItem(DateTimeAxis.ToDouble(DateTime.Now.AddMinutes(2)), 10, 2, 11, 15));
            bars.Add(new HighLowItem(DateTimeAxis.ToDouble(DateTime.Now.AddMinutes(3)), 16, 9, 15, 10));
            bars.Add(new HighLowItem(DateTimeAxis.ToDouble(DateTime.Now.AddMinutes(4)), 11, 5, 10, 8));
            bars.Add(new HighLowItem(DateTimeAxis.ToDouble(DateTime.Now.AddMinutes(5)), 12, 3, 8, 6));

            plotView.InvalidatePlot();
        }

        void OnCSMouseMove(object sender, OxyMouseEventArgs e)
        {
            Console.WriteLine("OnCSMouseMove");
        }

        void onSeriesMouseMove(object sender, OxyMouseEventArgs e)
        {
            Console.WriteLine("onSeriesMouseMove");
        }

        void OnTrackerChanged(object sender, TrackerEventArgs e)
        {
            Console.WriteLine("OnTrackerChanged");
        }

        public override NSObject RepresentedObject
        {
            get
            {
                return base.RepresentedObject;
            }
            set
            {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }
    }
}

.neighborhood-guides {
	top: -20px;
	position: relative;
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
    color: #393c3d;
    font-size: 24px;
}

.neighborhood-guides p {
    margin-bottom: 13px;
    font-size: 15px;
}

.thumbnail:hover {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
}
/*.nav {
	height: 160px;

}

.nav  img{
	position: absolute;
	height: 150px;
	display: block;
	left: 50%;
	margin-left: -50px;
}*/

.nav a {
	text-decoration: none;
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.nav li:hover {
	background: gray;
}

.nav li {
  display: inline;
}

a.dropdown-toggle:hover + ul.dropdown-menu, ul.dropdown-menu:hover {
display: block;
} 

.dropdown-menu { margin-top: 0; } 

.carousel {
	display: cover;
}

.carousel-inner {
	top: -20px;
	
}

.learn-more {
	top: -20px;
	position: relative;
  background-color: #f7f7f7;
  border-bottom: 1px solid #dbdbdb;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

footer , .row {
  font-size: 12px;
  padding: 10px 0;
}

footer img:hover {
	background: orange;
	cursor: pointer;
}

@media only screen and (min-width: 150px) {
	.carousel-caption {
	top: 20%;
	transform: translateY(-50%);
	position: absolute;
	text-align: left;
}
	.carousel-caption h1 {
  color: #fff;
  font-size: 14px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 12px;
  color: #fff;
}

.carousel-caption a {
  font-size: 12px;
  color: orange;
}
}

@media only screen and (min-width: 310px) {
	.carousel-caption {
	top: 30%;
	transform: translateY(-50%);
	position: absolute;
	text-align: left;
}
	.carousel-caption h1 {
  color: #fff;
  font-size: 18px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 14px;
  color: #fff;
}

.carousel-caption a {
  font-size: 14px;
  color: orange;
}
}
@media only screen and (min-width: 768px) {
	.carousel-caption {
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	text-align: left;
}
	.carousel-caption h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 20px;
  color: #fff;
}

.carousel-caption a {
  font-size: 20px;
  color: orange;
}
}

2 个答案:

答案 0 :(得分：0)

.neighborhood-guides {
	top: -20px;
	position: relative;
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
    color: #393c3d;
    font-size: 24px;
}

.neighborhood-guides p {
    margin-bottom: 13px;
    font-size: 15px;
}

.thumbnail:hover {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
}

.nav a {
	text-decoration: none;
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.nav li:hover {
	background: gray;
}

.nav li {
  display: inline;
}

a.dropdown-toggle:hover + ul.dropdown-menu,
ul.dropdown-menu:hover {
  opacity: 1;
} 

.dropdown-menu { 
  display: block !important;
  margin-top: 0;
  opacity: 0;
} 

.dropdown-menu,
.dropdown-menu li,
.dropdown-menu li a {
  transition: all .5s ease-in-out;
}

.learn-more {
	top: -20px;
	position: relative;
  background-color: #f7f7f7;
  border-bottom: 1px solid #dbdbdb;
}
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
		

	<div class="navbar navbar-default navbar-static-top">
	<div class="container">
		<a href = "#" class="navbar-brand">Easy Trip</a>
		<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		
		<div class="collapse navbar-collapse navHeaderCollapse">
        
		<ul class="nav navbar-nav navbar-left">
          <li><a href="#">Home</a></li>
          <li class="dropdown">
		  <a href="#" class="dropdown-toggle" data-toggle="dropdown">all<b class="caret"></b></a>
		  <ul class="dropdown-menu">
			<li><a href="#">Asia</a></li>
			<li><a href="#">Africa</a></li>
			<li><a href="#">Europe</a></li>
			<li><a href="#">America</a></li>
		  </ul>
		  </li>
        </ul>
			
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
		
		</div>
      </div>
	</div>
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>$("#myCarousel").carousel({interval:5000});</script>

答案 1 :(得分：0)

使用transition媒体资源：transition: all .3s ease;。其中.3s是以秒为单位的持续时间。

将.dropdown-menu设置为display: block。然后用visibility: hidden隐藏它。仅使用opacity: 0;它仍然可见，无论是透明色。

我为您编辑了以下行以获得所需的结果：

ul.dropdown-menu,
a.dropdown-toggle:hover + ul.dropdown-menu, ul.dropdown-menu:hover {
    transition: all .3s ease;
}

ul.dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
}

a.dropdown-toggle:hover + ul.dropdown-menu, ul.dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
}

＆＃13;
＆＃13; 
.neighborhood-guides {
	top: -20px;
	position: relative;
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
    color: #393c3d;
    font-size: 24px;
}

.neighborhood-guides p {
    margin-bottom: 13px;
    font-size: 15px;
}

.thumbnail:hover {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
}



/*.nav {
	height: 160px;

}

.nav  img{
	position: absolute;
	height: 150px;
	display: block;
	left: 50%;
	margin-left: -50px;
}*/


.nav a {
	text-decoration: none;
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.nav li:hover {
	background: gray;
}

.nav li {
  display: inline;
}

a.dropdown-toggle:hover + ul.dropdown-menu, ul.dropdown-menu:hover {
  display: block;
  
  animation-name: fade-in;
    animation-duration: .4s;
} 

.dropdown-menu { margin-top: 0; } 

.carousel {
	display: cover;
}

.carousel-inner {
	top: -20px;
	
}

.learn-more {
	top: -20px;
	position: relative;
  background-color: #f7f7f7;
  border-bottom: 1px solid #dbdbdb;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

footer , .row {
  font-size: 12px;
  padding: 10px 0;
}

footer img:hover {
	background: orange;
	cursor: pointer;
}

@media only screen and (min-width: 150px) {
	.carousel-caption {
	top: 20%;
	transform: translateY(-50%);
	position: absolute;
	text-align: left;
}
	.carousel-caption h1 {
  color: #fff;
  font-size: 14px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 12px;
  color: #fff;
}

.carousel-caption a {
  font-size: 12px;
  color: orange;
}
}

@media only screen and (min-width: 310px) {
	.carousel-caption {
	top: 30%;
	transform: translateY(-50%);
	position: absolute;
	text-align: left;
}
	.carousel-caption h1 {
  color: #fff;
  font-size: 18px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 14px;
  color: #fff;
}

.carousel-caption a {
  font-size: 14px;
  color: orange;
}
}
@media only screen and (min-width: 768px) {
	.carousel-caption {
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	text-align: left;
}
	.carousel-caption h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 20px;
  color: #fff;
}

.carousel-caption a {
  font-size: 20px;
  color: orange;
}
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}
＆＃13; 
<!DOCTYPE html>
<html>
	
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
	
    <link rel="stylesheet" href="main.css">
	
    
  </head>

  <body>
	<div class="navbar navbar-default navbar-static-top">
	<div class="container">
		<a href = "#" class="navbar-brand">Easy Trip</a>
		<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		
		<div class="collapse navbar-collapse navHeaderCollapse">
        
		<ul class="nav navbar-nav navbar-left">
          <li><a href="#">Home</a></li>
          <li class="dropdown">
		  <a href="#" class="dropdown-toggle" data-toggle="dropdown">all<b class="caret"></b></a>
		  <ul class="dropdown-menu">
			<li><a href="#">Asia</a></li>
			<li><a href="#">Africa</a></li>
			<li><a href="#">Europe</a></li>
			<li><a href="#">America</a></li>
		  </ul>
		  </li>
        </ul>
			
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
		
		</div>
      </div>
	</div>
    
	<div id="myCarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="http://hdwall.us/wallpaper_1920x1080/sun_cherry_blossoms_trees_flowers_desktop_1920x1080_hd-wallpaper-1194807.jpg" class="img-responsive">
					<div class="carousel-caption">
					<h1>Find a place to stay.</h1>
					<p>Rent from people in over 34,000 cities and 192 countries.</p>
					<a href="#">Learn More</a>
					</div>
				</div>
				<div class="item">
					<img src="http://xinature.com/wp-content/uploads/2016/10/forests-view-trees-sunlight-landscape-nature-sun-tree-sunrasy-sunrise-splendor-lovely-sunset-beautiful-woods-forest-magic-peaceful-rays-beauty-sky-hd-backgrounds-1920x1080.jpg" class="img-responsive">
					<div class="carousel-caption">
					<h1>Find a place to stay.</h1>
					<p>Rent from people in over 34,000 cities and 192 countries.</p>
					<a href="#">Learn More</a>
					</div>
				</div>
				<div class="item">
					<img src="https://wallpaperscraft.com/image/belgium_winter_garden_sun_sky_clearly_trees_60892_1920x1080.jpg" class="img-responsive">
					<div class="carousel-caption">
					<h1>Find a place to stay.</h1>
					<p>Rent from people in over 34,000 cities and 192 countries.</p>
					<a href="#">Learn More</a>
					</div>
				</div>
					<a class="carousel-control left" href="#myCarousel" data-slide="prev">
						<span class="icon-prev"></span>
					</a>
					<a class="carousel-control right" href="#myCarousel" data-slide="next">
						<span class="icon-next"></span>
					</a>
			</div>
		</div>
	
    
    <div class="neighborhood-guides">
        <div class="container">
            <h2>Neighborhood Guides</h2>
            <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Paris-HD-Wallpapers.jpg">
                    </div>
                    <div class="thumbnail">
                        <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Desktop-HD-Wallpapers.jpg">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://www.wallpapers-web.com/data/out/28/3948828-beautiful-places-wallpapers.jpg">
                    </div>
                    <div class="thumbnail">
                        <img src="https://s-media-cache-ak0.pinimg.com/originals/50/d5/22/50d52265980da137e18d3f85a5d9290e.jpg">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://swiss7.com/wp-content/uploads/2015/07/Top-20-safest-countries-in-the-world-for-solo-travelers.jpg">
                    </div>
                    <div class="thumbnail">
                        <img src="http://www.hd-wallpaper1.com/images/abandoned-place.jpeg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="learn-more">
	  <div class="container">
		<div class="row">
	      <div class="col-md-4">
			<h3>Travel</h3>
			<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
			<p><a href="#">See how to travel on Airbnb</a></p>
	      </div>
		  <div class="col-md-4">
			<h3>Host</h3>
			<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
			<p><a href="#">Learn more about hosting</a></p>
		  </div>
		  <div class="col-md-4">
			<h3>Trust and Safety</h3>
			<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
			<p><a href="#">Learn about trust at Airbnb</a></p>
		  </div>
	    </div>
	  </div>
	</div>
	<footer class="container">
    <div class="row">
      <p class="pull-left">
        &copy; 2017 Shoppiz
      </p>
      <ul class="col-sm-8 pull-right" style="list-style: none; display: flex; justify-content: flex-end">
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg" style="height:28px; width:28px"></li>
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg" style="height:28px; width:28px"></li>
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg" style="height:28px; width:28px"></li>
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/medium.svg" style="height:28px; width:28px"></li>
      </ul>
    </div>
	</footer>
	
  </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>$("#myCarousel").carousel({interval:5000});</script>
</html>
＆＃13;
＆＃13;
＆＃13;

上述解决方案的较短解决方案是使用@keyframes

将以下CSS添加到您的CSS文件中：

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

比如在.dropdown-menu类这样称呼它：

a.dropdown-toggle:hover + ul.dropdown-menu, ul.dropdown-menu:hover {
    display: block;
    animation-name: fade-in;
    animation-duration: .3s;
}
相关问题
最新问题