Question

我试图在此部分中使背景更具交互性，因此该部分的背景将相应地更改为标题。我在我的代码中尝试做的是拥有一个包含背景图像的容器，当我将鼠标悬停在不同的标题上时，它将更改为其指定的背景图像。

不确定我做错了什么。我确实尝试过将图像替换为之前悬停的另一个图像元素，但不是跨度文本。请指教。

HTML / CSS：

.expertise_menu {
  *background-image: url('../ga7-theme/img/expertise/Expertise_1.png');
  opacity: 1;
  z-index: 999;
}
.design-consultancy span:hover img {
  *background-image: url('../ga7-theme/img/expertise/Expertise_1.png');
  display: block;
  *opacity: 1;
  z-index: 999;
}
.expertise_menu .turnkey-project span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_2.png');
  opacity: 1;
}
.expertise_menu .inhouse-production span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_3.png');
  opacity: 1;
}
.expertise_menu .event-management span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_4.png');
  opacity: 1;
}
.expertise_menu #visual-merchandising span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_5.png');
  opacity: 1;
}

<section id="expertise" class="fullscreen specific-padding-4">
  <div class="content-a">
    <div class="row">
      <div class="container col-lg-4">
        <h2 style="text-align:right;">EXPERTISE</h2>
      </div>
      <!-- col-lg-12  -->
    </div>
    <!-- row  -->

    <!-- BACKGROUND -->
    <div class="fullscreen design-consultancy"></div>
    <div class="fullscreen turnkey-project"></div>
    <div class="fullscreen inhouse-production"></div>
    <div class="fullscreen event-management"></div>
    <div class="fullscreen visual-merchandising"></div>

    <div class="content-b col-lg-4 col-sm-12">
      <div class="expertise_menu">
        <span class="design-consultancy">Design Consultancy</span>
        <br>
        <span class="turnkey-project">Turn Key Project</span>
        <br>
        <span class="inhouse-production">In-House Productions</span>
        <br>
        <span class="event-management">Event Management</span>
        <br>
        <span class="visual-merchandising">Visual Merchandising</span>
        <br>
      </div>

    </div>
    <!-- col-lg-12  -->

    <div class="container-fluid col-lg-8">
      <!-- E/M/P/T/Y/ -->
    </div>
    <!-- col-lg-12  -->
  </div>
  <!-- row  -->
</section>
<!-- container  -->

Answer 1

摆脱所有背景div并保留一个单并为其提供ID。我将使用＆＃34; dynamic_background＆＃34;举个例子。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    globlOnDisplayEffect = [GlobalVariable sharedInstance];
    globlOnDisplayEffect.arTableDataSelectedWhereHouse = [[NSArray alloc] init];

}

- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return [globlOnDisplayEffect.arTableDataSelected count]>0 ?[globlOnDisplayEffect.arTableDataSelected count]:1;

}

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"DisplayEffectQtyViewCell";
    DisplayEffectQtyViewCell *cell = [self.tableViewDetailList dequeueReusableCellWithIdentifier:simpleTableIdentifier forIndexPath:indexPath];
    if(cell == nil)
    {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"DisplayEffectQtyViewCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];

    } 
    if (globlOnDisplayEffect.arTableDataSelected) {
        NSMutableArray *myMutbleArray = [[NSMutableArray alloc] init];
        [myMutbleArray addObject:globlOnDisplayEffect.arTableDataSelected];
        if (myMutbleArray)
        {
                NSDictionary *myDic = [globlOnDisplayEffect.arTableDataSelected objectAtIndex:indexPath.row];
                NSDictionary *cont = [myDic objectForKey:@"DataList_SPI_DetailF10"];
                NSString *f10_cmpt = [self getString:[cont objectForKey:@"f10_cmpt"]];
                NSString *f10_dt = [self getString:[cont objectForKey:@"f10_dt"]];
                NSString *f10_item = [self getString:[cont objectForKey:@"f10_item"]];
                NSString *f10_lot = [self getString:[cont objectForKey:@"f10_lot"]];
                NSString *f10_model = [self getString:[cont objectForKey:@"f10_model"]];
                NSString *f10_of = [self getString:[cont objectForKey:@"f10_of"]];
                NSString *f10_semi = [self getString:[cont objectForKey:@"f10_semi"]];
                NSString *f10_tm = [self getString:[cont objectForKey:@"f10_tm"]];
                NSString *f10_uncmp = [self getString:[cont objectForKey:@"f10_uncmp"]];
               [cell setf10_cmpt:f10_cmpt setf10_dt:f10_dt setf10_item:f10_item setf10_lot:f10_lot setf10_model:f10_model setf10_of:f10_of setf10_semi:f10_semi setf10_tm:f10_tm setf10_uncmp:f10_uncmp];
         }
    }

    return cell;
}

在您的专业知识菜单中添加ID，例如＆＃34; expertise_items＆＃34;

<div id="dynamic_background" class="fullscreen"></div>

使用jQuery

<div id="expertise_items" class="expertise_menu">

<强> CSS 更新您的CSS以仅将背景图像渲染为该类的一部分，并确保将容器的高度和宽度指定为您想要图像的大小，或者如果您希望它能够响应，您也可以这样做。

$(function() {
  $("#expertise_items span").hover(function() {
    var background = $(this).attr("class");
    $("#dynamic_background").attr("class", background);
  });
});

以下是您的示例小提琴：https://jsfiddle.net/adrianopolis/euc7p9qg/

鼠标悬停部分背景根据标题

1 个答案: